Foundation
Typography
Typographical selections intended to meet the highest standards of usability and accessibility, while setting a consistent look and feel in order to convey credibility.
Fonts
Source Sans Pro (.vads-u-font-family--sans)
Source Sans Pro is an open-source sans serif typeface created for legibility in UI design. With a variety of weights that read easily at all sizes, Source Sans Pro provides clear headers as well as highly-readable body text.
Inspired by twentieth-century American gothic typeface design, its slender but open letters offer a clean and friendly simplicity. Advanced hinting allows Source Sans Pro to render well on Windows systems which run Cleartype, and across browsers and devices. Moreover, it supports a variety of languages and alphabets, including Western and European language, Vietnamese, pinyin Romanization of Chinese, and Navajo.
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
Bitter (.vads-u-font-family--serif)
People read and interact with text on screens more and more each day. What happens on screen ends up being more important than what comes out of the printer. With the accelerating popularity of electronic books, type designers are working hard to seek out the ideal designs for reading on screen.
Motivated by my love for the pixel I designed Bitter. A “contemporary” slab serif typeface for text, it is specially designed for comfortably reading on any computer or device. The robust design started from the austerity of the pixel grid, based on rational rather than emotional principles. It combines the large x-heights and legibility of the humanistic tradition with subtle characteristics in the characters that inject a certain rhythm to flowing texts.
Bitter has little variation in stroke weight and the Regular is thicker than a normal ‘Regular’ style for print design. This generates an intense color in paragraphs, accentuated by the serifs that are as thick as strokes with square terminals.
Each glyph is carefully designed with an excellent curve quality added to the first stage of the design, that was entirely made in a pixel grid. The typeface is balanced and manually spaced to use very few kerning pairs, especially important for web font use since most browsers do not currently support this feature.
- Sol Matas (Designed for Huerta Tipográfica)
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
Headings
Headline H1
Headline H2
Headline H3
Headline H4
Headline H5
Headline H6
<h1>Headline H1</h1>
<h2>Headline H2</h2>
<h3>Headline H3</h3>
<h4>Headline H4</h4>
<h5>Headline H5</h5>
<h6>Headline H6</h6>
Headings and accessibility
Always use semantic headings, logically nested in the proper order. Do not use improper nesting to achieve a different font size. In other words, an h1 should never be followed by an h3; it should only be followed by an h2. Use the font-size utility to change the font size of a semantic heading instead.
Do
Use utility classes to change the font size of a semantic heading.
Example
<h1>Main heading</h1>
<p>Some text</p>
<h2 class="vads-u-font-size--h3">Secondary heading</h2>
Don’t
Don’t change heading level in order to use a different font size.
Example
<h1>Main heading</h1>
<p>Some text</p>
<h3>Secondary heading</h3>
Paragraphs
VA Intro Text has the class 'va-introtext'. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean venenatis laoreet augue scelerisque sollicitudin.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean venenatis laoreet augue scelerisque sollicitudin.
<!-- Intro text -->
<p class="va-introtext">VA Intro Text has the class 'va-introtext'. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean venenatis laoreet augue scelerisque sollicitudin.</p>
<!-- Regular paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean venenatis laoreet augue scelerisque sollicitudin.</p>
Typography tokens
Primitive typography tokens
- vads-font-family-sans-serif
- 'Source Sans Pro', 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif
- Sans-serif font stack
- vads-font-family-serif
- "Bitter","Georgia","Cambria","Times New Roman","Times",serif
- Serif font stack
- vads-font-line-height-1
- 1
- From USWDS. Usage: buttons, navigation, and text not meant to break over a line
- vads-font-line-height-2
- 1.2
- From USWDS. Usage: headings, introductory (lead or dek) text, no more than 1-2 sentences
- vads-font-line-height-3
- 1.35
- From USWDS. Usage: short text (under 1 paragraph), captions, text with a very short or very long measure
- vads-font-line-height-4
- 1.5
- From USWDS. Usage: short (1-2 paragraphs) of running text, especially with a short measure
- vads-font-line-height-5
- 1.62
- From USWDS. Usage: a good choice for most reading text, especially text meant for extended reading
- vads-font-line-height-6
- 1.75
- From USWDS. Usage: shorter text (1-2 paragraphs) meant to be distinguished from other page text, pullquotes
- vads-size-line-length-1
- 44ex
- From USWDS.
- vads-size-line-length-2
- 60ex
- From USWDS.
- vads-size-line-length-3
- 64ex
- From USWDS.
- vads-size-line-length-4
- 68ex
- From USWDS.
- vads-size-line-length-5
- 72ex
- From USWDS.
- vads-size-line-length-6
- 88ex
- From USWDS.
- vads-size-line-length-none
- none
- From USWDS.
- vads-font-size-2xl
- 40px
- vads-font-size-base
- 17px
- vads-font-size-lg
- 20px
- vads-font-size-md
- 17px
- vads-font-size-sm
- 15px
- vads-font-size-xl
- 32px
- vads-font-style-italic
- italic
- vads-font-style-normal
- normal
- vads-font-weight-bold
- bold
- vads-font-weight-regular
- regular
Semantic typography tokens
- vads-font-line-height-body-lead
- 1.75
- Line height for lead paragraphs
- vads-font-line-height-default
- 1.5
- Default line height for paragraphs
- vads-font-line-height-heading
- 1.2
- Default line height for headings. Was 1.3
- vads-font-size-body-large
- 20px
- Largest body font size
- vads-font-size-body-lead
- 20px
- Lead font size for body text. For lead paragraphs.
- vads-font-size-body-medium
- 17px
- Medium body font size
- vads-font-size-body-small
- 15px
- Smallest body font size
- vads-font-size-eyebrow
- 17px
- Eyebrow is an experimental request which adds type above an h1.
- vads-font-size-heading-level-1
- 40px
- Heading level 1. h1 value.
- vads-font-size-heading-level-2
- 32px
- Heading level 2. h2 value. Was 30px
- vads-font-size-heading-level-3
- 20px
- Heading level 3. h3 value.
- vads-font-size-heading-level-4
- 17px
- Heading level 4. h4 value.
- vads-font-size-heading-level-5
- 15px
- Heading level 5. h5 value.
- vads-font-size-heading-level-6
- 15px
- Heading level 6. h6 value. h6 is also sans-serif, unlike other headers.