2016-04-20-web-typography.md 2.2 KB
description: > # "title:" Key web typography rules.
title: "Web Typography"
The typographic quality of a document is largely determined by how the body text looks. Keep the following points in mind for a better body text.
- Point size. 15-25 pixels.
- Line spacing. 120-145% of the point size. Modify the
line-heightin CSS. - Line length. 66 characters, ideal. Anywhere from 45 to 85 characters is good.
- System Fonts. Avoid using Times New Roman, and Arial.
- Monospaced Fonts. Only use them for code.
- Serif fonts. Only on higher resolution screens.
- Word spaces. Never use them for styling. Use
 for acronyms. - Underlining. Don't use it unless it's a hyperlink.
- Bold and Italics. Use as little as possible.
- Small caps. Only if actually available. Use an extra 5-12% of letter spacing.
- First-line indents or paragraph spaces, never both.
- Fist-line indent. 1-4x the text point size.
- Paragraph space. 4-10 points of space between paragraphs.
- Use hyphenation in justified text
- Use curly quotes.
Typographic Elements
| Character | OS X | HTML |
|---|---|---|
| ' | ' |
' |
| " | " |
" |
| ‘ | option + ] |
‘ |
| ’ | option + shift + ] |
’ |
| “ | option + [ |
“ |
| ” | option + shift + [ |
” |
| – | option + - |
– |
| — | option + shift + - |
— |
| … | option + ; |
… |
| & | & | & |
| © | option + g |
© |
| ¢ | option + 4 |
¢ |
| £ | option + 3 |
£ |
| € | option + shift + 2 |
€ |
Resources
For more elements check out: