Body text
text-body font-regular
The quick brown fox jumps over the lazy dog.
font-weight:
font-size:
line-height:
letter-spacing:
Use for paragraph and list text. This style can be used in regular, bold and link format.
Typography
Introduction
Our typeface is Rubik, which was designed by Hubert and Fischer in 2015 for Google. It is an open-source typeface that comes in 5 weights with Roman and Italic styles, and is available for free from Google Fonts.
We are primarily using only 3 of Rubik’s weights: Light, Regular, and Semibold.
SF
rubik
light (300)
SF
rubik
regular (400)
SF
rubik
semibold (600)
SF
Roboto mono
regular (400)
font-family: Rubik, ui-sans-serif, sans-serif;
font-family: Roboto mono, monospace;
Text styles
This set of standardized text styles should cover most needs, including headings and body copy.
For some of the larger titles, there are special mobile styles that are sized down so that text will still fit on a smaller screen.
Bold
Rubik Bold is very wide and heavy, so we use Rubik Semibold as our “bold”
weight option. This is used in headers, but also any text that is <strong> or
<b>. Rubik Bold should not be used.
Italic
We try to avoid Italic text on SF.gov. It is difficult to read, especially for people with dyslexia or visual impairments. Try to differentiate your text using color, size, spacing, or other treatments instead.
Links
We primarily use underlines to indicate clickable links. If a link is included in any of the text styles, it should be underlined. Note, color is also often used to differentiate the link text.
Monospace
text-regular font-mono
The quick brown fox jumps over the lazy dog.
font-weight:
font-size:
line-height:
letter-spacing:
Use rarely. Monospace can help separate code or labels from natural language text. In the future, another possible use is when proportionally spaced characters would cause misalignment or jumping.
Desktop text styles
These styles are used on larger screens.
Display sizes
Large display
text-display-lg-desktop font-light
The quick brown fox jumps over the lazy dog.
font-weight:
font-size:
line-height:
letter-spacing:
Small display
text-display-sm-desktop font-light
The quick brown fox jumps over the lazy dog.
font-weight:
font-size:
line-height:
letter-spacing:
Page titles
Use page titles to introduce and group sections of content. Ideally, page
titles should be nested, from x-large to
x-small sizes, but occasionally a title style is skipped for
a greater size difference. Use either x-large title (pages
with color banner) or display large (pages with no color
banner) to style the one-time page title (<h1>).
X-Large Title
text-title-xl-desktop font-medium
The quick brown fox jumps over the lazy dog.
font-weight:
font-size:
line-height:
letter-spacing:
Large Title
text-title-lg-desktop font-medium
The quick brown fox jumps over the lazy dog.
font-weight:
font-size:
line-height:
letter-spacing:
Medium Title
text-title-md-desktop font-medium
The quick brown fox jumps over the lazy dog.
font-weight:
font-size:
line-height:
letter-spacing:
Small Title
text-title-sm-desktop font-medium
The quick brown fox jumps over the lazy dog.
font-weight:
font-size:
line-height:
letter-spacing:
X-Small Title
text-title-xs-desktop font-medium
The quick brown fox jumps over the lazy dog.
font-weight:
font-size:
line-height:
letter-spacing:
Additional text styles
Big description
text-big-desc-desktop font-regular
The quick brown fox jumps over the lazy dog.
font-weight:
font-size:
line-height:
letter-spacing:
Use to draw attention to blocks of text, such as the page introduction paragraph. This style is slightly larger in size and line height compared to the regular body text style.
Small text
text-small font-regular
The quick brown fox jumps over the lazy dog.
font-weight:
font-size:
line-height:
letter-spacing:
Use this style sparingly for text that is smaller than the regular body style size, such as photo credits.
Mobile text styles
These styles follow the same guidelines as the desktop styles but are smaller in size for use on smaller screens.
Display sizes
Large display
text-display-lg font-light
The quick brown fox jumps over the lazy dog.
font-weight:
font-size:
line-height:
letter-spacing:
Small display
text-display-sm font-light
The quick brown fox jumps over the lazy dog.
font-weight:
font-size:
line-height:
letter-spacing:
Page titles
X-Large Title
text-title-xl font-medium
The quick brown fox jumps over the lazy dog.
font-weight:
font-size:
line-height:
letter-spacing:
Large Title
text-title-lg font-medium
The quick brown fox jumps over the lazy dog.
font-weight:
font-size:
line-height:
letter-spacing:
Medium Title
text-title-md font-medium
The quick brown fox jumps over the lazy dog.
font-weight:
font-size:
line-height:
letter-spacing:
Additional text styles
Big description
text-big-desc font-light
The quick brown fox jumps over the lazy dog.
font-weight:
font-size:
line-height:
letter-spacing: