Web

Interface

Handbook
Aleksei Baranov

imperavi.com/books
Web Interface Handbook
ISBN 978-952-94-5356-6

imperavi.com/books

Aleksei Baranov
2021
Table of contents Web Interface Handbook

Table of contents

Typography 4 Inputs 116

Spacing 6 Sizes 118

Images 18 States 122

Headings 29 Labels 127

Text 39 Country 132

Tables 49 Address 135

Quotes 53 Search 138

Lists 59 Phone 143

Links 63 Date & time 146

Layout 67 Buttons 151

Principles 69 Competition 153

Grid 75 Style 157

States 162

Sizes 166
Forms 83 Patterns 170

Required & optional 85

Hints 90

Errors 94 Color 173

Buttons 99 Palette 175

Long & complicated forms 107 Dark theme 180

Horizontal forms 110

Patterns 190

Navigation 192

Cards 199

Slideshow 203

Tabs & accordion 206

3
Typography Web Interface Handbook

Typography

4
Typography Web Interface Handbook

Typography is what readers will judge when choosing a particular site/application. It

can be a subconscious decision. Just as people distinguish professional music from
bad amateur music.

People see harmony, balance, rhythm. People distinguish good composition from
bad composition. They do this constantly throughout the day, conducting many
processes of comparison, identification, analyzing ratios.

It looks "reliable," it looks "beautiful," it seems to be "well-made," all the result of an

analysis of harmony, balance, rhythm, and other basics of perception. People do this
analysis in a fraction of a second and base their choices in favor of one or the other.
Good typography helps to make a choice.

Typography is based on the same natural and mathematical principles as everything

else in the world. So all other things being equal, people will choose good
typography over bad. People can see the harmony, the balance, color ratios, size
ratios in good typography, and make their decision based on that.

5
Typography Web Interface Handbook

Spacing

6
Typography / Spacing Web Interface Handbook

01
Spacing above the heading
An increased distance above the heading helps to better structure the text and
separate parts of the text from each other. A large space from a paragraph or other
content to the heading creates a pause and makes the text easier to read. It also
creates an interesting rhythm and adds variety to long texts.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet
tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris
malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac porttitor pulvinar.
20

The quick brown fox jumps over the lazy dog

20

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet
tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris
malesuada nisi sit amet augue accumsan tincidunt.
20

Maecenas tincidunt, velit ac porttitor pulvinar, tortor eros facilisis libero, vitae commodo nunc
quam et ligula. Ut nec ipsum sapien. Interdum et malesuada fames ac ante ipsum primis in
faucibus. Integer id nisi nec nulla luctus lacinia non eu turpis. Etiam in ex imperdiet justo tincidunt
egestas. Ut porttitor urna ac augue cursus tincidunt sit amet sed orci.

The heading has the same spacing at the bottom and top.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet
tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris
malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac porttitor pulvinar.

48

The quick brown fox jumps over the lazy dog

20

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet
tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris
malesuada nisi sit amet augue accumsan tincidunt.
20

Maecenas tincidunt, velit ac porttitor pulvinar, tortor eros facilisis libero, vitae commodo nunc
quam et ligula. Ut nec ipsum sapien. Interdum et malesuada fames ac ante ipsum primis in
faucibus. Integer id nisi nec nulla luctus lacinia non eu turpis. Etiam in ex imperdiet justo tincidunt
egestas. Ut porttitor urna ac augue cursus tincidunt sit amet sed orci.

The heading has a larger spacing at the top.

7
Typography / Spacing Web Interface Handbook

02
Smaller spacing
for smaller headings
For small headings, it's best to make a smaller spacing at the bottom. This will make
it closer to the following text. This way the heading won't be visually detached from
the text and will get a good connection to it.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet
tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris
malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac porttitor pulvinar.
36

The quick brown fox jumps over the lazy dog

20

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet
tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris
malesuada nisi sit amet augue accumsan tincidunt.
20

Maecenas tincidunt, velit ac porttitor pulvinar, tortor eros facilisis libero, vitae commodo nunc
quam et ligula. Ut nec ipsum sapien. Interdum et malesuada fames ac ante ipsum primis in
faucibus. Integer id nisi nec nulla luctus lacinia non eu turpis. Etiam in ex imperdiet justo tincidunt
egestas. Ut porttitor urna ac augue cursus tincidunt sit amet sed orci.

The small heading is too far from the text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet
tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris
malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac porttitor pulvinar.
36

The quick brown fox jumps over the lazy dog

8
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet
tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris
malesuada nisi sit amet augue accumsan tincidunt.
20

Maecenas tincidunt, velit ac porttitor pulvinar, tortor eros facilisis libero, vitae commodo nunc
quam et ligula. Ut nec ipsum sapien. Interdum et malesuada fames ac ante ipsum primis in
faucibus. Integer id nisi nec nulla luctus lacinia non eu turpis. Etiam in ex imperdiet justo tincidunt
egestas. Ut porttitor urna ac augue cursus tincidunt sit amet sed orci.

The small heading is close to the text that follows.

8
Typography / Spacing Web Interface Handbook

03
Larger spacing for larger headings
It is good when the headings have a larger space at the bottom. This creates an ease
of reading the text and a good balance. If the distance is too small, the heading
presses the text with its contrast.

The quick brown fox

jumps over the lazy dog
20

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet
tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris
malesuada nisi sit amet augue accumsan tincidunt.
20

Maecenas tincidunt, velit ac porttitor pulvinar, tortor eros facilisis libero, vitae commodo nunc
quam et ligula. Ut nec ipsum sapien. Interdum et malesuada fames ac ante ipsum primis in
faucibus. Integer id nisi nec nulla luctus lacinia non eu turpis. Etiam in ex imperdiet justo tincidunt
egestas. Ut porttitor urna ac augue cursus tincidunt sit amet sed orci.

The big heading is too close to the text.

The quick brown fox

jumps over the lazy dog
40

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet
tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris
malesuada nisi sit amet augue accumsan tincidunt.
20

Maecenas tincidunt, velit ac porttitor pulvinar, tortor eros facilisis libero, vitae commodo nunc
quam et ligula. Ut nec ipsum sapien. Interdum et malesuada fames ac ante ipsum primis in
faucibus. Integer id nisi nec nulla luctus lacinia non eu turpis. Etiam in ex imperdiet justo tincidunt
egestas. Ut porttitor urna ac augue cursus tincidunt sit amet sed orci.

The big heading and text have a good balance of spacing.

9
Typography / Spacing Web Interface Handbook

04
Spacing between paragraphs
Eligible spacing between paragraphs is 0.5..1 of line spacing. So, if line spacing is
24px, good spacing between paragraphs would be 12..24px. This helps to separate
the paragraphs from each other and make the text easier to read.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet
tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris
malesuada nisi sit amet augue accumsan tincidunt.
8
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet
tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris
malesuada nisi sit amet augue accumsan tincidunt.
8
Maecenas tincidunt, velit ac porttitor pulvinar, tortor eros facilisis libero, vitae commodo nunc
quam et ligula. Ut nec ipsum sapien. Interdum et malesuada fames ac ante ipsum primis in
faucibus. Integer id nisi nec nulla luctus lacinia non eu turpis. Etiam in ex imperdiet justo tincidunt
egestas. Ut porttitor urna ac augue cursus tincidunt sit amet sed orci.

Spacing between paragraphs is too small.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet
tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris
malesuada nisi sit amet augue accumsan tincidunt.
20

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet
tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris
malesuada nisi sit amet augue accumsan tincidunt.
20

Maecenas tincidunt, velit ac porttitor pulvinar, tortor eros facilisis libero, vitae commodo nunc
quam et ligula. Ut nec ipsum sapien. Interdum et malesuada fames ac ante ipsum primis in
faucibus. Integer id nisi nec nulla luctus lacinia non eu turpis. Etiam in ex imperdiet justo tincidunt
egestas. Ut porttitor urna ac augue cursus tincidunt sit amet sed orci.

Eligible spacing between paragraphs.

10
Typography / Spacing Web Interface Handbook

05
Spacing between
paragraphs and lists
It is not a good idea to decrease the spacing before the list. At first glance, it may seem
like a nice trick to improve the connection between the list and the previous text. But
such a step rather breaks the vertical rhythm, introduces unnecessary pauses, and
worsens the readability of the text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet
tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris
malesuada nisi sit amet augue accumsan tincidunt.
8
1. Consensuses of futility
2. Stone and conceptual rationalism
3. The dialectic paradigm of context and subdialectic sublimation
20

Maecenas tincidunt, velit ac porttitor pulvinar, tortor eros facilisis libero, vitae commodo nunc
quam et ligula. Ut nec ipsum sapien. Interdum et malesuada fames ac ante ipsum primis in
faucibus. Integer id nisi nec nulla luctus lacinia non eu turpis. Etiam in ex imperdiet justo tincidunt
egestas. Ut porttitor urna ac augue cursus tincidunt sit amet sed orci.

Unequal spacing before and after the list breaks the rhythm.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet
tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris
malesuada nisi sit amet augue accumsan tincidunt.
20

1. Consensuses of futility
2. Stone and conceptual rationalism
3. The dialectic paradigm of context and subdialectic sublimation
20

Maecenas tincidunt, velit ac porttitor pulvinar, tortor eros facilisis libero, vitae commodo nunc
quam et ligula. Ut nec ipsum sapien. Interdum et malesuada fames ac ante ipsum primis in
faucibus. Integer id nisi nec nulla luctus lacinia non eu turpis. Etiam in ex imperdiet justo tincidunt
egestas. Ut porttitor urna ac augue cursus tincidunt sit amet sed orci.

The list at the top and bottom has the same spacing as between paragraphs.

11
Typography / Spacing Web Interface Handbook

06
Spacing between
text and image or table
It's a good idea to increase the spacing after an image or table to the following
content. With equal spacing, there is no way to pause and focus on the image or
table. The eye immediately turns to the text that follows.

20

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet
tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris
malesuada nisi sit amet augue accumsan tincidunt.
20

Maecenas tincidunt, velit ac porttitor pulvinar, tortor eros facilisis libero, vitae commodo nunc
quam et ligula. Ut nec ipsum sapien. Interdum et malesuada fames ac ante ipsum primis in
faucibus. Integer id nisi nec nulla luctus lacinia non eu turpis. Etiam in ex imperdiet justo tincidunt
egestas. Ut porttitor urna ac augue cursus tincidunt sit amet sed orci.

Spacing after the image is the same as between the paragraphs.

12
Typography / Spacing Web Interface Handbook

If the spacing after the image or table is increased, it will help to create text dynamics
by pausing between these elements and their different kinds of data.

36

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet
tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris
malesuada nisi sit amet augue accumsan tincidunt.
20

Maecenas tincidunt, velit ac porttitor pulvinar, tortor eros facilisis libero, vitae commodo nunc
quam et ligula. Ut nec ipsum sapien. Interdum et malesuada fames ac ante ipsum primis in
faucibus. Integer id nisi nec nulla luctus lacinia non eu turpis. Etiam in ex imperdiet justo tincidunt
egestas. Ut porttitor urna ac augue cursus tincidunt sit amet sed orci.

Increased spacing after the image.

13
Typography / Spacing Web Interface Handbook

07
Spacing between
text and quote or line
It is a good way to add extra emphasis to the text and the quote or horizontal line by
adding spacing at the bottom and top. With equal distances between the various
elements, the rhythm of the content is static and monotonous.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet
tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris
malesuada nisi sit amet augue accumsan tincidunt.
20

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet
tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris
malesuada nisi sit amet augue accumsan tincidunt.
20

Lorem ipsum dolor sit amet, consectetur

adipiscing elit. Maecenas varius tortor nibh, sit
amet tempor nibh finibus et.
20

Maecenas tincidunt, velit ac porttitor pulvinar, tortor eros facilisis libero, vitae commodo nunc
quam et ligula. Ut nec ipsum sapien. Interdum et malesuada fames ac ante ipsum primis in
faucibus. Integer id nisi nec nulla luctus lacinia non eu turpis. Etiam in ex imperdiet justo tincidunt
egestas. Ut porttitor urna ac augue cursus tincidunt sit amet sed orci.
20

20

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet
tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris
malesuada nisi sit amet augue accumsan tincidunt.

Quote and line have the same spacing as between paragraphs.

14
Typography / Spacing Web Interface Handbook

By making different spacing, this creates an interesting visual rhythm, allowing the
reader to pause before and after these elements.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet
tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris
malesuada nisi sit amet augue accumsan tincidunt.
20

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet
tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris
malesuada nisi sit amet augue accumsan tincidunt.
32

Lorem ipsum dolor sit amet, consectetur

adipiscing elit. Maecenas varius tortor nibh, sit
amet tempor nibh finibus et.
32

Maecenas tincidunt, velit ac porttitor pulvinar, tortor eros facilisis libero, vitae commodo nunc
quam et ligula. Ut nec ipsum sapien. Interdum et malesuada fames ac ante ipsum primis in
faucibus. Integer id nisi nec nulla luctus lacinia non eu turpis. Etiam in ex imperdiet justo tincidunt
egestas. Ut porttitor urna ac augue cursus tincidunt sit amet sed orci.
32

32

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet
tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris
malesuada nisi sit amet augue accumsan tincidunt.

Quote and line have an increased spacing at the top and bottom.

15
Typography / Spacing Web Interface Handbook

08
The vertical rhythm
based on the 8px or baseline grid
is of little importance
Equal spacing between elements or arranging all blocks of text based on the
baseline or 8px grid does not make the text visually more attractive or easier to read.
Just as in music, so in typography, pauses and changes in rhythm are more
important than something boring and uniform.

The quick brown fox jumps over the lazy dog

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit
amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit
molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt.

The quick brown fox jumps over the lazy dog

Maecenas tincidunt, velit ac porttitor pulvinar, tortor eros facilisis libero, vitae commodo
nunc quam et ligula. Ut nec ipsum sapien. Interdum et malesuada fames ac ante ipsum
primis in faucibus. Integer id nisi nec nulla luctus lacinia non eu turpis. Etiam in ex
imperdiet justo tincidunt egestas.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit
amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit
molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt.

A baseline or 8px grid does not automatically give a good vertical rhythm.

16
Typography / Spacing Web Interface Handbook

A good vertical rhythm is achieved by contrasting headings and texts, by different

distances between headings, text and other content.

The quick brown fox

jumps over the lazy dog
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit
amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie.
Mauris malesuada nisi sit amet augue accumsan tincidunt.

The quick brown fox jumps over the lazy dog

Maecenas tincidunt, velit ac porttitor pulvinar, tortor eros facilisis libero, vitae commodo
nunc quam et ligula. Ut nec ipsum sapien. Interdum et malesuada fames ac ante ipsum
primis in faucibus. Integer id nisi nec nulla luctus lacinia non eu turpis. Etiam in ex
imperdiet justo tincidunt egestas.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit
amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie.
Mauris malesuada nisi sit amet augue accumsan tincidunt.

Working with distance and contrast creates a unique and interesting vertical rhythm.

17
Web Interface Handbook
ISBN 978-952-94-5356-6

imperavi.com/books

Aleksei Baranov
2021