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 uses a minimum effective size of 19px for large screens and 16px 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 read primarily by word shapes and not character by character; it may be especially problematic for people with dyslexia who rely on word shapes more heavily.
Italics
Avoid use of 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. Italics font styles significantly impairs the ability to read and understand the text.
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 automatically modifies alignment. Do not manually change text 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. Only 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
Controlling the length of lines of text (measure), helps readers’ attention flow easily from one line to the next, making reading more natural and comfortable.
Lines of text are 45-90 characters are broadly considered to be a readable line length, with enough line spacing for the eye to easily track and travel from one end to the other. Target 66 characters wide for comfortable reading of longer text.
Utilize the ch measuring unit to adhere closely. For instance, the CSS p {width: 66ch;} will strictly enforce good 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.
Longer text and longer lines require more line height. 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.
For text that is 1rem (approximately 16px) and 66ch wide, aim for a line-height of 1.6.