Typography
For development purposes, it is best to use relative units (such as percentages or ems) to specify font sizes rather than absolute units (such as pixels or points). This provides much flexibility in modifying the visual presentation using CSS.
Typesetting controls the readability of a text with the size, style, and spacing of its type. Text with poor readability turns off readers and can make it challenging for them to stay focused.
Adapted from the United States Web Design System.
Typeface
Two typefaces were chosen because they are native so do not require additional resource requests nor external dependencies. The font sets have a superlative count for glyph support and are highly readable. They are available to everyone.
Headings and blockquotes
Georgia is the primary typeface for headings and quotes.
Lucida Bright is the secondary fallback and is never listed as the primary.
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, blockquote {
font-family: Georgia, Lucida Bright, serif;
}
Body text, links, and buttons
Tahoma is the primary typeface for copy.
Verdana is the secondary fallback and is never listed as the primary.
body {
font-family: Tahoma, Verdana, sans-serif;
}
Font size
Use a comfortable reading size for body text.
Body text has an ideal effective size of 18px (1.125rem) for large screens and 16px (1rem) on small screens. Smaller and larger text are used sparingly via semantic HTML elements (headings, captions, footnotes).
Smaller text may be used for captions and footnotes. The text may not be smaller than (effectively) 16px on large screens and 14px on small screens.
Font styles
Uppercase
Use uppercase only for abbreviations. “All caps” is difficult for people to read because we use word shapes as clues and do not read character by character; it may be especially problematic for people with dyslexia who may rely on word shapes more heavily.
Italics
Avoid italics text unless listed as an exception in the guidelines below. Similar to using all uppercase letters, italics are harder to see and read. Do not use italics for captions or smaller font sizes, which increases the risk of illegibility.
Stressed words or phrases
Use <em> to stress specific words that change the meaning of a sentence. For instance, “dogs are cute animals” vs. “dogs are cute animals” vs. “dogs are cute animals” vs. “dogs are cute animals”. Other stressed emphasis may also denote clarification, correction, sarcasm or a key part of a counter argument.
Alternate voice or mood
Use <i> to represent “a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text.” For example, “Carnivorous Vulgaris keeps chasing his prey, Accelerati Incrediblus.” This is coded thus:
<i lang="la">Carnivorous Vulgaris</i> keeps chasing his prey, <i lang="la">Accelerati Incrediblus</i>.
Tips for selecting the correct italics method.
- When considering italics for a word/phrase, think about why and choose the right element for the task, if possible.
- When in doubt, read it aloud. Or get someone else to read it aloud and see if it matches expected inflections.
- If using italics on more than one or two words,
<em> may not be the right element.
- Marking a whole phrase with
<em> means urgency, typically with exclamations.
- When nesting italics-producing tags, use a bold font weight.
You’re using <em> wrong
Conversational semantics
Underline
Reserve underlines for hyperlinks unless listed as an exception.
Font weight
Do not use a font weight less than 400 (normal). A light or thin font weight is hard to read or may be unreadable for some people. For text that needs emphasis, use <strong> to get a 700 font weight (bold).
Headings and paragraphs
Well-formatted documents improve assistive technology navigation. Avoid using HTML elements for style, only use elements semantically.
Use only one space after a sentence period. The use of two spaces was to accommodate the physical typewriter’s use of the monospace typeface, in which the period has the same width as the letter “w”, making it harder to visually determine its role. In dynamic typography, characters have their own widths and so double spacing is not necessary. Read more about two spaces at APA Style.
Headings
Headings will cascade in size.
<h1> is only allowed for page titles, the most descriptive heading for the page. Only one is allowed per page.<h2> is primarily used for major content sections.<h3> is for a subsection of a major content section.- Avoid using
<h4> through <h6> when possible
Paragraphs
Paragraphs follow content guidelines for writing.
All text maintains default colors unless it is modified by components or elements. Do not manually modify colors or sizes.
Leads
For blocks of content that read like an article, use a lead paragraph to summarize the who, what, why, when, where, and how for the key point of the content. Style this paragraph with the .lead class, which increases the size of the text.
For pages with leads that span more than one paragraph, use .lead on a <div> element.
Text alignment
Left align all content unless the component or theme automatically modifies alignment.
The rag (the uneven edge the text creates) on the right of a left-aligned content block is important for ease of reading. If longer words (16+ characters) may possibly cause extreme gaps in the rag, add a soft hyphen (­) in the HTML code to encourage an appropriate breakpoint in the word. Use the soft hyphen sparingly.
Avoid centered and justified text. Use right aligned text for languages that read from right to left and are properly coded using the lang attribute to identify the correct language.
Measure
Capping the text line length (measure) helps readers’ attention flow easily from one line to the next, making reading more natural and comfortable.
Lines of text between 45 to 90 characters are broadly considered to be an optimal line length for reading, with enough line spacing for the eye to easily track and travel from one end to the other. Target 66 character-long lines for comfortable reading of longer text.
The ch measuring unit may help to achieve this because it is based on character length. For instance, the CSS p {width: 66ch;} will enforce a good maximum line length.
Line height
Line height controls the vertical rhythm and density of a text block. Its measure is written as a unitless multiplier of the text’s font size.
The eye struggles to distinguish between lines of text when it has to travel from the end of one long line to the beginning of the next. Giving the right amount of breathing room optimizes the eye's ability to travel efficiently to the next line.
For text that is 1rem (approximately 16px) and 66ch wide, aim for a line-height of 1.6.