Web fonts & writing for the web

African American man's hands typing on a laptop at home

Why should I adjust my writing for the web?

Fonts, spacing and organization can have positive or negative effects on the person reading the page.

Accessible fonts

Elaborate fonts may be difficult to read if the characters are not well defined in shape and size. Sans-serif fonts are fonts without small lines at the end of characters. Serif fonts have little decorative lines that some people might find difficult to read. Serif fonts can also create problems in scanned prints as pixelation can distort and cause blurring.

  • Arial (most widely used sans-serif font)
  • Verdana (sans-serif)
  • Calibri (sans-serif)
  • Tahoma (sans-serif)
  • Helvetica (sans-serif)
  • Century Gothic (sans-serif)
  • Times New Roman (most widely used serif font)
  • Georgia (serif)

Web typography

Font family: Use a small number of different font types, only one or two per page.

Font sizes: Recommended minimum font size is 12 point. Use bold to add emphasis rather than UPPERCASE or italics (but sparingly).

Headings: Use headings to make the relationship between content more apparent, and to make the page easier to scan and understand.

Indent style: Separating paragraphs from one to another helps with legibility. Use either a space between paragraphs, or an indentation. It is not necessary to use both.

Text alignment: Alignment of text affects how users will read. Most text, especially long lines of text, should be left aligned because it allows readers to easily jump to the next line. Center alignment is best suited for short lengths of text, or special content like titles and headings. Right alignment is not usually recommended. Justified text creates subtle spacing between words so that each line is the same width. This is not recommended unless in certain situations.

Descriptive links: Give readers a clear idea of the destination they will arrive at upon clicking them, particularly for screen reader users who navigate websites by moving from link to link using the tab key. This is crucial to ensure that links are contextually meaningful and relevant.

White space: Empty space around the elements of a page including the text and images. This prevents a page from becoming cluttered and difficult to read, and allows the page’s information to come across in a clear and efficient manner.