A typeface is a styled set of letters, numbers, and characters

A typeface is used to display text. It's usually called "font", but a font is actually the file that contains the typeface.


How does it work?

A typeface needs to be well readable when used for large amounts of texts. Badly readable typefaces can only used for single words, for their decorative effect. Serif fonts have small features at the ends of the strokes. Sans-serif fonts don't have them.

There should be a minimal contrast between text color and background color to be readable.

Text is normally aligned left, but it may be centered for headlines and captions. Some scripts are naturally written from right to left. Text can be right aligned when it better suits the monetary values in a column.


Use either serif or sans-serif fonts for paragraphs of text. Common typefaces are Helvetica, Arial, Georgia, Times New Roman and Calibri. A font size of 16px is considered the minimum for readability. 18px is a common size. A line length of 60 to 80 characters is recommended for readability.


Use a paragraph font or a slab serif font (A slab serif font is a serif font where the serif is squared off). The size is at least a few pixels higher than the paragraph font.


Use a sans-serif font for text in components.


You can use a monospaced font for numbers that need to alined, and for other values. Also for code examples.

Decorative elements

Short texts that aim to enliven your site can have any font. Comic sans is considered unprofessional, but may still be used to express playfulness or unseriousness.