Q: How big should the text on my website be?

A: It depends.

The long answer can be split into 3 parts:

  • Legibility,
  • Readability, &
  • Context.
 

 

Legibility

Let's focus on legibility first; being able to distinguish individual letter and by extension words from each other.

Size- We've seen a Snellen eyechart and know that size has a big impact. We have experience and in some cases actual data on size's impact on on road signs to books. What works in what context, distance from the letters, lighting and speed.

Type design- A typeface where the presence or absense of serif and variety in stroke thickness offer visual cues differentiating similar letters from each other plays

Letter design- Shapes that differentiate between each other. Critical letters include:

  • l, 1 and i.
  • Or g, q, and p.
  • 0, Q, 0,

Readability

Once the text gets longer, being able to comfortably read the text is important Responsive websites force us to ensure that the text is readable on a range from a 3" wide phone to a 30" monitor with many variants in between and potentially a few outlier cases like large screen TV's and watches.

Line-length- font size ties into line-length generally at 40-60 words per line

Line-spacing- 1.3x the font size creates nice spacing to distinguish indiviual lines from each other.

Proportion between body text and headings- A balanced proportion between the body text and different level of headings helps organize text visually.


Context

I brought up the size of the device and relative speed before. It is a context. On a website, several sizes and potential combinations of fonts are used to differentiate levels of headings, call outs, etc from the main body text.

Typographic Scale

A traditional series of type sizes developed in the 16th century. The unit of measurement is point where one pt is 1/72 of an inch in the Imperial System. These sizes operate can be compared to diatonic scale in music.

The size of the body text depends on the column width dicated by the constraint of whether the context is a book, magazine, or newspaper. A balance needs to be struck between the body type size and fitting anywhere from 40 to 60 characters per line. A standard body type size of 12 pt and largest heading H1 at 36 pt, leaving multiple steps for intermediate headings at 14, 18, 21, 24.

Typographic scale in pts (1pt= 1/72")
a a a a a a a a a a a a a a a
6 7 8 9 10 11 12 14 18 21 24 36 48 60 72

Pixels operate differently. There's 3:4 ratio between pixels and points based on old assumption that screens were 96dpi.

16 pixels is visually equivalant to 12pts.

Typographic scale in pixels
a a a a a a a a a a a a a a a
6 7 8 9 10 11 12 14 18 21 24 36 48 60 72

Print Norms

Several norms developed in print for the relative size of the body text and headings. A recommended line length of 66 characters for maximum clarity readablity and proportion in print becomes 40 to 50 characters in multi-column newspapers.

Digital

Adapting print norms get complicated when you factor in smaller screen sizes and different resolution standards with digital devices.

Each device has a default body text size that's roughly 16px or 1em. The largest heading might be anywhere from 2 to 3 times the body text size depending on the screen size.


Context

Road Signs, Newspapers, Magazines, Books

vs Apps, Brochureware, News,

data exists on roads signs. We have analytics for websites and apps.


Responsive Typography Scale

I've prepared some examples based on Jason Pamental's work.

  Print Desktop Tablet Phone
Body
Font Size
Line Height

12pt
1.25

16px
1.375

16px
1.25

16px
1.375
H1
Font Size
Line Height

36pt
1.25

48px
1.05

40px
1.125

32px
1.25
H2
Font Size
Line Height

24pt
1.25

36px
1.25

32px
1.125

26px
1.136
H3
Font Size
Line Height

18pt
1.25

28px
1.25

24px
1.125

32px
1.136
 
 

H1 Phone Sample

H2 Heading 2

You may have seen many a quaint craft in your day, for aught I know;—square-toed luggers; mountainous Japanese junks; butter-box galliots, and what not; but take my word for it, you never saw such a rare old craft as this same rare old Pequod.

Heading 3

She was a ship of the old school, rather small if anything; with an old-fashioned claw-footed look about her. Long seasoned and weather-stained in the typhoons and calms of all four oceans, her old hull’s complexion was darkened like a French grenadier’s, who has alike fought in Egypt and Siberia. Her venerable bows looked bearded. Her masts—cut somewhere on the coast of Japan, where her original ones were lost overboard in a gale—her masts stood stiffly up like the spines of the three old kings of Cologne. Her ancient decks were worn and wrinkled, like the pilgrim-worshipped flag-stone in Canterbury Cathedral where Becket bled. But to all these her old antiquities, were added new and marvellous features, pertaining to the wild business that for more than half a century she had followed.

H3 Heading 3

Old Captain Peleg, many years her chief-mate, before he commanded another vessel of his own, and now a retired seaman, and one of the principal owners of the Pequod,—this old Peleg, during the term of his chief-mateship, had built upon her original grotesqueness, and inlaid it, all over, with a quaintness both of material and device, unmatched by anything except it be Thorkill-Hake’s carved buckler or bedstead. She was apparelled like any barbaric Ethiopian emperor, his neck heavy with pendants of polished ivory. She was a thing of trophies. A cannibal of a craft, tricking herself forth in the chased bones of her enemies. All round, her unpanelled, open bulwarks were garnished like one continuous jaw, with the long sharp teeth of the sperm whale, inserted there for pins, to fasten her old hempen thews and tendons to. Those thews ran not through base blocks of land wood, but deftly travelled over sheaves of sea-ivory. Scorning a turnstile wheel at her reverend helm, she sported there a tiller; and that tiller was in one mass, curiously carved from the long narrow lower jaw of her hereditary foe. The helmsman who steered by that tiller in a tempest, felt like the Tartar, when he holds back his fiery steed by clutching its jaw. A noble craft, but somehow a most melancholy! All noble things are touched with that.

H1 Tablet Sample

H2 Heading 2

You may have seen many a quaint craft in your day, for aught I know;—square-toed luggers; mountainous Japanese junks; butter-box galliots, and what not; but take my word for it, you never saw such a rare old craft as this same rare old Pequod.

Heading 3

She was a ship of the old school, rather small if anything; with an old-fashioned claw-footed look about her. Long seasoned and weather-stained in the typhoons and calms of all four oceans, her old hull’s complexion was darkened like a French grenadier’s, who has alike fought in Egypt and Siberia. Her venerable bows looked bearded. Her masts—cut somewhere on the coast of Japan, where her original ones were lost overboard in a gale—her masts stood stiffly up like the spines of the three old kings of Cologne. Her ancient decks were worn and wrinkled, like the pilgrim-worshipped flag-stone in Canterbury Cathedral where Becket bled. But to all these her old antiquities, were added new and marvellous features, pertaining to the wild business that for more than half a century she had followed.

H3 Heading 3

Old Captain Peleg, many years her chief-mate, before he commanded another vessel of his own, and now a retired seaman, and one of the principal owners of the Pequod,—this old Peleg, during the term of his chief-mateship, had built upon her original grotesqueness, and inlaid it, all over, with a quaintness both of material and device, unmatched by anything except it be Thorkill-Hake’s carved buckler or bedstead. She was apparelled like any barbaric Ethiopian emperor, his neck heavy with pendants of polished ivory. She was a thing of trophies. A cannibal of a craft, tricking herself forth in the chased bones of her enemies. All round, her unpanelled, open bulwarks were garnished like one continuous jaw, with the long sharp teeth of the sperm whale, inserted there for pins, to fasten her old hempen thews and tendons to. Those thews ran not through base blocks of land wood, but deftly travelled over sheaves of sea-ivory. Scorning a turnstile wheel at her reverend helm, she sported there a tiller; and that tiller was in one mass, curiously carved from the long narrow lower jaw of her hereditary foe. The helmsman who steered by that tiller in a tempest, felt like the Tartar, when he holds back his fiery steed by clutching its jaw. A noble craft, but somehow a most melancholy! All noble things are touched with that.

H1 Desktop Sample

H2 Heading 2

You may have seen many a quaint craft in your day, for aught I know;—square-toed luggers; mountainous Japanese junks; butter-box galliots, and what not; but take my word for it, you never saw such a rare old craft as this same rare old Pequod.

Heading 3

She was a ship of the old school, rather small if anything; with an old-fashioned claw-footed look about her. Long seasoned and weather-stained in the typhoons and calms of all four oceans, her old hull’s complexion was darkened like a French grenadier’s, who has alike fought in Egypt and Siberia. Her venerable bows looked bearded. Her masts—cut somewhere on the coast of Japan, where her original ones were lost overboard in a gale—her masts stood stiffly up like the spines of the three old kings of Cologne. Her ancient decks were worn and wrinkled, like the pilgrim-worshipped flag-stone in Canterbury Cathedral where Becket bled. But to all these her old antiquities, were added new and marvellous features, pertaining to the wild business that for more than half a century she had followed.

H3 Heading 3

Old Captain Peleg, many years her chief-mate, before he commanded another vessel of his own, and now a retired seaman, and one of the principal owners of the Pequod,—this old Peleg, during the term of his chief-mateship, had built upon her original grotesqueness, and inlaid it, all over, with a quaintness both of material and device, unmatched by anything except it be Thorkill-Hake’s carved buckler or bedstead. She was apparelled like any barbaric Ethiopian emperor, his neck heavy with pendants of polished ivory. She was a thing of trophies. A cannibal of a craft, tricking herself forth in the chased bones of her enemies. All round, her unpanelled, open bulwarks were garnished like one continuous jaw, with the long sharp teeth of the sperm whale, inserted there for pins, to fasten her old hempen thews and tendons to. Those thews ran not through base blocks of land wood, but deftly travelled over sheaves of sea-ivory. Scorning a turnstile wheel at her reverend helm, she sported there a tiller; and that tiller was in one mass, curiously carved from the long narrow lower jaw of her hereditary foe. The helmsman who steered by that tiller in a tempest, felt like the Tartar, when he holds back his fiery steed by clutching its jaw. A noble craft, but somehow a most melancholy! All noble things are touched with that.