Reference typography for on screen reading

  1. Full code
  2. Font sizes by selector (alphabetical order)
  3. Font sizes by size (ascending)
  4. Discussion

This is the list of font-sizes that I currently use for the recurring elements like headers, lists, etc. of websites.

The sizes are presented as CSS rules ordered by size or by selector, in alphabetical order. Only the font-sizes of the body and html tags are expressed in pixels: the other rules use rem values.

According to the W3C specs 1 rem equals the “computed value of font-size on the root element” so if the html font-size is set to 16 pixels, 1 rem = 16 pixels, 0.8 rem = 12.8 pixels, etc.

For elements that do not have a specific HTML tag – like an emphasis blockquote – I use a class selector with a descriptive name (e.g.: .emphasis-blockquote).

At the end of the lists there is a small explanation of the rationale behind the chosen values.

Full code

Font sizes by selector (alphabetical order)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
blockquote {
font-size: 0.8rem
}

body {
font-size: 21px /*body and html selectors are usually grouped in a single rule*/
}

caption {
font-size: 0.8 rem
}

code {
font-size: 0.8rem
}

.emphasis-blockquote {
font-size: 1.2rem
}

figcaption {
font-size: 0.8rem
}

h1 {
font-size: 2rem
}

h2 {
font-size: 1.5rem
}

h3 {
font-size: 1.25rem
}

h4 {
font-size: 0.9rem
}

h5 {
font-size: 0.9rem
}

h6 {
font-size: 0.9rem
}

input {
font-size: 0.8rem
}

label {
font-size: 0.7rem
}

html {
font-size: 21px /*body and html selectors are usually grouped in a single rule*/
}

.meta {
font-size: 0.9rem
}

ol {
font-size: 0.8rem
}

p {
font-size: 1rem
}

pre {
font-size: 0.8rem
}

.read-more-text{
font-size: 0.9rem
}

.title {
font-size: 2rem
}

ul {
font-size: 0.8rem
}

Font sizes by size (ascending)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
h1, .title{
font-size: 2rem
}

h2 {
font-size: 1.5rem
}

h3 {
font-size: 1.25rem
}

.emphasis-blockquote {
font-size: 1.2rem
}

p {
font-size: 1rem
}

html, body {
font-size: 21px
}

h4, h5, h6, .meta, .read-more-text {
font-size: 0.9rem
}

blockquote, caption, code, figcaption, input, label, ol, pre, ul {
font-size: 0.8rem
}

Discussion

These are few principles that guided me to pick the values:

  • font sizes should not be responsive, i.e. the paragraph font size should remain consistent between a large monitor and a mobile phone;
  • a too big text is better than an unreadable text (i.e. it is better to err on the side of caution);
  • the number of different font sizes should be kept to the minimum .

I also tried to read some scientific papers on the subject of readability, and tried to follow their suggestion. I found particulary interesting the following two papers:

An issue where my choice differs considerably from the results of the mentioned papers is the size of the main body text, which I set to 21 pixels and not to 12-14 pixels as raccomended. I believe that 12 - 14 pixels if a far too small size for comfortable on-screen reading, and so followed the “big font size” trend that could be observed in websites like Medium, The New York Times, etc.

Font size by selector

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
blockquote {
font-size: 0.8rem
}

body {
font-size: 21px /*body and html selectors are usually grouped in a single rule*/
}

caption {
font-size: 0.8 rem
}

code {
font-size: 0.8rem
}

.emphasis-blockquote {
font-size: 1.2rem
}

figcaption {
font-size: 0.8rem
}

h1 {
font-size: 2rem
}

h2 {
font-size: 1.5rem
}

h3 {
font-size: 1.25rem
}

h4 {
font-size: 0.9rem
}

h5 {
font-size: 0.9rem
}

h6 {
font-size: 0.9rem
}

input {
font-size: 0.8rem
}

label {
font-size: 0.7rem
}

html {
font-size: 21px /*body and html selectors are usually grouped in a single rule*/
}

.meta {
font-size: 0.9rem
}

ol {
font-size: 0.8rem
}

p {
font-size: 1rem
}

pre {
font-size: 0.8rem
}

.read-more-text{
font-size: 0.9rem
}

.title {
font-size: 2rem
}

ul {
font-size: 0.8rem
}

Font sizes by size

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
h1, .title{
font-size: 2rem
}

h2 {
font-size: 1.5rem
}

h3 {
font-size: 1.25rem
}

.emphasis-blockquote {
font-size: 1.2rem
}

p {
font-size: 1rem
}

html, body {
font-size: 21px
}

h4, h5, h6, .meta, .read-more-text {
font-size: 0.9rem
}

blockquote, caption, code, figcaption, input, label, ol, pre, ul {
font-size: 0.8rem
}
dark