Text Size and Style for Web

The Best Choice.. according to the experts

  1. Avoid specifying a font size for the main text - let the browser handle it.
  2. Use H1,H2,H3 tags for headers and subheaders instead of manually changing font sizes.
  3. AVOID ALL UPPER CASE LETTERS, and use upper and lower case.
  4. Use bold rather than italics text to emphasize information. Italic text is not as legible on a computer monitor
  5. Avoid specifying any point sizes. Use relative sizes like "large, medium small" instead.
  6. Avoid the CSS format x-small ("extra-small") and font sizes smaller than 9 points.
  7. If you're forced to set a font size, use pixels instead of points.

Rationale

The above recommendations are meant to increase legibility on computer monitors and allow users to control their own font settings.

Basic Information

Avoid specifying a font size for main text

  1. Users can set their browsers to the font size they need. Some users may prefer 14 point type, others 10 point type.
  2. Setting a fixed size may disable zooming in older browsers. Readers will not be able to read "small text"
  3. Different platforms render font sizes differently. A text set at 12 points will appear larger in Windows and smaller on Macs. See the example comparison image from the Yale Web Style Guide
  4. If you are forced to set a font size, then make the minimum size 12 points (or 12 pixels) for body text (Bernard and Mills, 2000).

Use H1,H2,H3 tags for headers and subheaders

  1. Search engines identify words in H1,H2 tags as keywords
  2. New browsers and screen readers can convert H tags into a table of contents
  3. H1,H2,H3 tags are interchangable with "Heading 1,Heading 2,Heading 3" styles of Word, PDF and other text editing software.
  4. If you do not like the default format of these tags, then you can change how they are displayed within a CSS stylesheet. Your code will remain lighter (and quicker to download).

Use bold text instead of italics to emphasize information.

Adding Emphasis

Lynch and Horton (2002) – "A Web page of solid body text is hard to scan for content structure and will not engage the eye. Adding display type to a document will provide landmarks to direct the reader through your content. Display type establishes an information structure and adds visual variety to draw the reader into your material. The key to effective display type is the careful and economic use of typographic emphasis."

Bold vs. Italic

  • Italic letters are harder to read on a computer monitor than in print (Arditi 2005).
  • Italic letters may cause spacing problems in some browsers (Fussino, 2004)
  • Don't use underlines for emphasis because underline usually means "link" on a Web page.
  • Colored text is another way to add emphasis

Avoid all Upper Case Letters

  1. A mix of upper and lowercase is faster and easier to read than all capital letters.
    Hill, 2001 – "This increase in speed is due to a person's tendency to recognize the shape of the word as opposed to each individual letter in a word.
  2. Body text in all capital letters is also interpreted as shouting rather than emphasis.

Avoid specifying any point sizes

  1. Use CSS formatting attributes like "small, medium,large,x-large,xx-large"
  2. Relative sizes are more flexible because they change accordingly with their surroundings. If a user decides to resize a window or rescale the text, the font sizes will change accordingly to suit the user's preferences. Therefore, the users can browse the page the way they want.
  3. Relative sizes will make your site "platform independent." That means your font sizes will not change dramatically across different types of browsers and platforms (Evolved Code, 2000,2003)

Avoid the CSS format "x-small" and "xx-small"

  1. Avoid using {font-size: x-small} since it is often rendered in 8 point on a Mac and becomes virtually unreadable.
  2. Text should be no smaller than 9 pixels to remain legible on all platforms.

Pixels instead of points

CSS Fixed point size measurements can be used in some contexts (e.g. headlines), but if you do so then use font-size:12px instead of "font-size:12pt".

  1. When pixel sizes are used, fonts are displayed at the same size across platforms.
  2. In older browsers, a specified point type on a Macintosh machine is appeared about two size larger on a Windows machine. (Lynch & Horton, 1997).
  3. In general pixel font sizes are smaller on Windows than corresponding point font sizes. On a Macintosh, there is no difference

For example

Display of Points vs. Pixels on Mac and Windows
  Windows Macintosh
12 points 12 point text 12 point text
12 pixels 12 pixel text 12 pixel text
14 points 14 point text 14 point text
14 pixels 14 pixel text 14 pixel text

Note: In newer Mac browsers, text specified in point sizes may be enlarged to Windows point sizes. Pixel sizes remain consistent.

References

Arditi, Aries (2005) Making Text Legible: Designing for People with Partial Sight
Retrieved Jan 11, 2007 from
http://www.lighthouse.org/print_leg.htm

Bernard, Michael & Mills, Melissa. (2000). "So, what size and type of font should I use on my Website?" Usability News Summer 2000. Retrieved May 14, 2003, from
http://psychology.wichita.edu/surl/usabilitynews/2S/font.htm

Bernard, Michael, Mills, Melissa, Peterson, M. & Storrer, K. (2001). "A comparison of popular online fonts: Which is best and when?" Usability News Summer 2001.
Retrieved May 14, 2003, from
http://psychology.wichita.edu/surl/usabilitynews/3S/font.htm

Evolved Code (2000, 2007) Sizes - Why use relative scales?.
Retrieved May 14, 2003, from:
http://evolvedcode.net/content/doc_relativesizes/

Fassino, Bruno (2004) "IE and Italics"
Retrieved Jan 11, 2007 from
http://www.positioniseverything.net/explorer/italicbug-ie.html

Hartley, J. (1981). Eighty ways of improving instructional text. IEEE Transactions on Professional Communication, 24 (1), 17-27.

Hill, A. (2001). Readability of websites with various foreground/background color combinations, font types and word styles. Retrieved May 14, 2003, from
http://hubel.sfasu.edu/research/AHNCUR.html#Fig1

Lynch Patrick and Horton, Sarah (1997) Yale Web Style Guide, Version 1- Typefaces
Retrieved Jan 11, 2007 from
http://www.tu-chemnitz.de/docs/yale/pages/font_face.html(German Mirror)

Lynch Patrick and Horton, Sarah (2002) "Emphasis" from Web Style Guide, 2nd Edition
Retrieved Jan 11, 2007 from
http://webstyleguide.com/type/emphasis.html
Now: http://www.webstyleguide.com/wsg3/8-typography/5-typographic-emphasis.html

Penn State University (1999, 2006) Creating Accessible Web Sites: Fonts.
Retrieved Jan 11, 2007, from
http://tlt.its.psu.edu/suggestions/accessibility/font.html

Wilmut, Roger (no date) The Windows/Mac Font Size Problem
Retrieved Jan 11, 2006
http://www.rfwilmut.clara.net/about/fonts.html

Additional Links