Font Systems

Fonts on the web are render blocking. This means that you will see a white page with nothing on it until all the fonts have been downloaded. Because of this, try to limit the number of font-families you use per website, and try to be stingy with font weights and font styles. Each different font weight and style counts as a unique font to download—italics included.

Helpful Tips:

  • Do not use point (pt) to define font sizes. You cannot set size by pt on the web, and it does not convert evenly into pixels (px). Web font sizes can only be set in px, em, or rem. (EM and REM can’t be used in Sketch).
  • Use the corresponding number value when indicating font-weight:
    • 100 – Thin
    • 200 – Extra Light (Ultra Light)
    • 300 – Light
    • 400 – Normal
    • 500 – Medium
    • 600 – Semi Bold (Demi Bold)
    • 700 – Bold
    • 800 – Extra Bold (Ultra Bold)
    • 900 – Black (Heavy)
    • 950 – Extra Black (Ultra Black)

Font Hierarchy on the Web

Google rewards semantic HTML with higher SEO rankings. Part of semantic HTML is the relative order of text headers (H1, H2, H3…) on a page. Having a semantic layout for headers also helps to make a site accessible for people with disabilities using screen readers and other assistive technologies. By following the rules below, designs will be easily translatable into semantic HTML.

Header Rules:

  • Every page must have exactly/only one H1.
  • Every page must have an H1 before any other header elements.
  • Pages can have multiple H2, H3… elements, but they must appear in a hierarchical order. If you use a H2 as a module header, then paragraph headers inside of that module should be H3’s. If you need to further break one of those paragraphs into different sections, H4’s should be used. Your next module should then start with an H2

Font System Choices

For every website, please define font-size, font-family, font-weight and margin for all available format options. The following list includes all of the format options to consider in your design:

  • H1
  • H2
  • H3
  • H4
  • H5
  • H6
  • Body Text
  • Body Text Large
  • Body Text Small
  • List Styles (optional)
  • Button (Main)
  • Button (Secondary)
  • Link

Default Fonts

These fonts are used by browsers as fallbacks and do not need to be downloaded. From a performance standpoint they are a great choice for a header or body font on a website.

  • Arial (sans-serif)
  • Verdana (sans-serif)
  • Helvetica (sans-serif)
  • Tahoma (sans-serif)
  • Trebuchet MS (sans-serif)
  • Times New Roman (serif)
  • Georgia (serif)
  • Garamond (serif)
  • Courier New (monospace)
  • Brush Script MT (cursive)

Google and Adobe Fonts

When finding custom fonts, make sure they are available in either Google Fonts or Adobe Font Kit (and if you have multiple custom fonts on a site, make sure they are all available in either Google Fonts or Adobe Font Kit, don’t pick one font only availabe in Google and one font only available in Adobe).

Sometimes a custom font will be needed that is not available in either Google or Adobe. If this is the case, please provide the font in the following formats: .woff2 and one of either .woff, .ttf, or .eot, and ensure that we procure an appropriate license from the founder / approve associated costs with client.

 

 

Your Font Library in Sketch

In the Web Component Library you will find a page called Style Sheets. This sheet will not only give you and the developer an overview of the typography being used, but also a quick glance of the hierarchy of those fonts. This is an important tool for the developer once development begins. Set your fonts and once they’re set, fill in the stats for those styles on the left hand side. It’s a good idea to include a link or location to where you can find the font being used, so the developer doesn’t have to question or hunt it down.

You can update each text style in the kit to match the unique font-family, font-weight, font-size, line-height and margin for your project. The line-height for each font should always have a consistent relation to the font-size (ex: line-height = 135% of font-size).

Use the Text palette to update the fonts style attributes.

Once the style attributes have been updated, click the Update button in the Appearance palette.

Variable Type Styles

Once you’ve set your type heirarchy above, if you have any variables, i.e. body center vs. body left white, you can update those by heading over to the text components through the Appearance palette and selecting another version of the text style. Repeat the process to update each variation.

Once you’ve updated the existing text styles, save the Sketch file. In your web project file you will get a Component Updates Available alert in the top right hand corner. Click to review the most recent changes and click Update Components.