Design
Typography
General Principles
Our Font Choice
The Arial typeface is used for all body copy. It is a strong but neutral typeface that lends personality to the page without overpowering the content.
Let the Lines Breathe
Line-height, traditionally known as leading, is one of several factors that directly contribute to readability and pacing of copy. Line-heights are based on the size of the font itself. Ideal line-heights for standard copy have a ratio of 1.5. The exception to this rule are headlines. They need less spacing and therefore have a smaller line-height ratio.
1.25 x font size for headlines
1.5 x font size for all other copy
Be Aware of the Line Length
Line-length, traditionally known as measure, is the number of characters in a single line. It also directly contributes to the readability and pacing of copy. Lines that are too long degrade eye tracking from line to line, making it difficult to gauge which line to read next. In contrast, lines that are too short make it difficult for a reader to maintain a steady reading rhythm. Short lines often create disproportionate ragged edges that negatively affect the design.
52 - 87 characters per line
Left-align Text Areas
Left aligned text is easier to read than centered text for paragraphs. When you center your text, the starting place of each line changes. This forces the user to work harder to find where each line begins to continue reading. Without a straight left edge, there is no consistent place where users can move their eyes to when they complete each line. Center-aligned text can be used for some labels or small amounts of text.
Specific Definitions
Font
Lorem ipsum dolor sit amet. Proin gravida euismod mullis.
Headings
Mark up headings semantically using the appropriate <h#> level HTML element and use a heading class to apply the styling. Style headings consistently to create a clear visual hierarchy throughout your screen.
If your screen has lots of long form content, use the corresponding size class. For example an <h1> should use heading-xl, an <h2> should use heading-l and so on.
If your screen has lots of question pages, short form content or pages with long headings, start with heading-l for an <h1>. But change it if your pages feel unbalanced – semantic and visual hierarchy do not always need to be the same.
Write all headings in title case.