Typography + Spacing Guide

Owned by Kristen Emiko Shiozaki (Deactivated)
Last updated: Jun 06, 2020
1 min read

Section Plan

  1. Online Typeface (Website)

    1. Font Family: Roboto

      1. Qualities
        (clean, standard, Material Design recommendation)

      2. Preferred Casing
        (all uppercase for H1 & H2 to draw the reader’s attention and lowercase for the rest to communicate friendliness. Also easier for users to read lowercase over uppercase)

    2. Alphabet & Numbers (uppercase & lowercase)

    3. Samples (different font weights, each saying ‘UW Midnight Sun’)

Research

 

Original Typography (Squarespace 29/05/2020)

Class

Type

Spacing

Pairing

Use Cases

Class

Type

Spacing

Pairing

Use Cases

H1

  • Font: Roboto

  • Size: 48 pt

  • Style: Normal

  • Weight: 700

  • Kerning: 0.05 em

  • Line Height: 1.8 em

H1 = Bold

  • Title Page

  • Banner Text

H2

  • Font: Roboto

  • Size: 20 pt

  • Style: Normal

  • Weight: 700

  • Kerning: 0.10 em

  • Line Height: 1.3 em

H2 = Bold

  • Page Section Headers

H3

  • Font: Roboto

  • Size: 10 pt

  • Style: Normal

  • Weight: 400

  • Kerning: 0.05 em

  • Line Height: 1.3 em

H3 = Normal

  • Media Tags

Navigation

  • Font: Roboto

  • Size: 12 pt

  • Style: Normal

  • Weight: 700

  • Kerning: 0.05 em

  • Line Height: 1.3 em

Nav = Bold

  • Self Explanatory

Body

  • Font: Roboto

  • Size: 18 pt

  • Style: Normal

  • Weight: 300

  • Kerning: 0.05 em

  • Line Height: 1.3 em

Body = Regular

  • Paragraph Text

  • Footer Text