top of page
USING
FONTS
TYPOGRAPHY
GLOSSARY
serif
A serif font has stroke embellishments on the ends of letters called serifs. Serif fonts are easy to read in print materials.
sans serif
A sans serif font does not have stroke embellishments on the ends of letters. Sans serif fonts are easy to read on digital mediums.
Script
A script font links together letter to letter and are best for headings or display. Make sure you pick one that is legible!
slab serif
A slab serif font is identified by its thick, block-like serifs.
Decorative
Decorative fonts are the fonts that are more stylelized and do not quite fit into any of the other categories. They should be used sparingly and in larger sizes.
Hierarchy
The order in which you read information based on typeface, scale, position, and style.
PAIRING EXAMPLES
57 pt
UPPERCASE
27 pt
ITALIC
13 pt
Lorem ipsum dolor sit amet, ea vim errem deleniti consectetuer, ne pri nisl causae, quod scripta meliore mei ea. Id nec nostro vivendo. Eirmod lucilius ius in, eos quidam commodo an. Cu has veritus dissentiet, in zril iriure per. Vix ut liber honestatis.
LEAGUE SPARTAN
Libre Baskerville
DESIGN PUBLICATION
62 pt
UPPERCASE
24 pt
110 LETTER SPACE
16 pt
Source Sans Pro Lorem ipsum dolor sit amet, ea vim errem deleniti consectetuer, ne pri nisl causae, quod scripta meliore mei ea. Id nec nostro vivendo. Eirmod lucilius ius in, eos quidam commodo an. Cu has veritus dissentiet, in zril iriure per. Vix ut liber honestatis.
JULIUS SANS ONE
ARCHIVO NARROW
RESUME
92 pt
​
22 pt
BOLD
16 pt
Open Sans Lorem ipsum dolor sit amet, ea vim errem deleniti consectetuer, ne pri nisl causae, quod scripta meliore mei ea. Id nec nostro vivendo. Eirmod lucilius ius in, eos quidam commodo an. Cu has veritus dissentiet, in zril iriure per. Vix ut liber honestatis.
Yellowtail
OPEN SANS BOLD
BIKE SHOP
85 pt
UPPERCASE
22 pt
120 LETTER SPACE
16 pt
Montserrat Lorem ipsum dolor sit amet, ea vim errem deleniti consectetuer, ne pri nisl causae, quod scripta meliore mei ea. Id nec nostro vivendo. Eirmod lucilius ius in, eos quidam commodo an. Cu has veritus dissentiet, in zril iriure per. Vix ut liber honestatis.
BEBAS NEUE BOLD
MONTSERRAT
FASHION RETAIL
From these examples, you can see that there are many different components about fonts that you can play with to create hierarchy and contrast. When looking at these examples, if you squint your eyes you will easily be able to distinguish the heading from the subheading and the paragraph text.
​
You want to choose your heading font and size, your subheading font and size, and your body text font and size from the beginning and use them consistently across your site.
​
To get some more specific ideas on what fonts pair well together, check out this font pairing generator.
​
​
bottom of page