Design System: Typography

Typography Guide

Welcome to the first of my design system series: Typography. Type is important when it comes to usability and getting your message across. You will need to keep your typography consistent across all platforms: web, mobile, video & print.

For this guide, I want to cover web & mobile type systems. This guide is for front-end and back-end developers or engineers, so you don't have to create it yourself.

Variables

To setup the system, I've created variables for elements that will be re-used. This includes font families, line height & font weight. I will add more to this system when needed.

Also included from my layout variables are media queries. I use them in the type system to change the type size based on screen size. I use this in place of flexible font sizes tools, such as vw and % because its easier to control.

// Variables
  // Font Family
  $font-family-heading: Helvetica;
  $font-family-body: Times New Roman;

  // Line Height
  $font-lineheight-small: 1.1;
  $font-lineheight-normal: 1.3;
  $font-lineheight-large: 1.5;

  // Font Weight
  $font-weight-light: 300;
  $font-weight-normal: 400;
  $font-weight-bold: 700;

  // Media Queries
  // Usage: @media (min-width: $mq-tablet) {code};
  $mq-ip5: 321px;
  $mq-ip6: 375px;
  $mq-ip6p: 414px;
  $mq-phonexl: 576px;
  $mq-tablet: 768px;
  $mq-laptop: 992px;
  $mq-desktop: 1200px;
  $mq-wide: 1400px;

Mixins

My lone mixin for my type system. This mixin allows me to use REM font sizing when it can be supported. For unsupported browsers, it switches to pixels (PX).

// Mixins
  // Usage: @include font-size(16);
  @mixin font-size($sizeValue: 16) {
    font-size: $sizeValue + px;
    font-size: ($sizeValue / 10) + rem;
  }

Size System

Here's where the mixin and the media queries are put to work. For my type system, I wanted to simplify how I handle font sizes across screen sizes. It's not perfect and you can add more media queries to handle specific sizes. I wanted to cover the main type sizes you usually see in Photoshop or Figma.

To use this system, just add @extend .t-xx; to your line of code. The downside to this that you cannot use @extend inside a media query. So this will keep you constrained to simple font sizes for your elements, which is a good thing in the long run.

// Size System
  // Usage: @extend .t-96;
  .t-96 {
    @include font-size(81);
    @media (min-width: $mq-tablet) {
      @include font-size(96);
    }
  }
  .t-81 {
    @include font-size(72);
    @media (min-width: $mq-tablet) {
      @include font-size(81);
    }
  }
  .t-72 {
    @include font-size(64);
    @media (min-width: $mq-tablet) {
      @include font-size(72);
    }
  }
  .t-64 {
    @include font-size(56);
    @media (min-width: $mq-tablet) {
      @include font-size(64);
    }
  }
  .t-56 {
    @include font-size(48);
    @media (min-width: $mq-tablet) {
      @include font-size(56);
    }
  }
  .t-48 {
    @include font-size(36);
    @media (min-width: $mq-tablet) {
      @include font-size(48);
    }
  }
  .t-36 {
    @include font-size(32);
    @media (min-width: $mq-tablet) {
      @include font-size(36);
    }
  }
  .t-32 {
    @include font-size(28);
    @media (min-width: $mq-tablet) {
      @include font-size(32);
    }
  }
  .t-28 {
    @include font-size(24);
    @media (min-width: $mq-tablet) {
      @include font-size(28);
    }
  }
  .t-24 {
    @include font-size(21);
    @media (min-width: $mq-tablet) {
      @include font-size(24);
    }
  }
  .t-21 {
    @include font-size(18);
    @media (min-width: $mq-tablet) {
      @include font-size(21);
    }
  }
  .t-18 {
    @include font-size(16);
    @media (min-width: $mq-tablet) {
      @include font-size(18);
    }
  }
  .t-16 {
    @include font-size(14);
    @media (min-width: $mq-tablet) {
      @include font-size(16);
    }
  }
  .t-14 {
    @include font-size(12);
    @media (min-width: $mq-tablet) {
      @include font-size(14);
    }
  }
  .t-12 {
    @include font-size(10);
    @media (min-width: $mq-tablet) {
      @include font-size(12);
    }
  }
  .t-10 {
    @include font-size(8);
    @media (min-width: $mq-tablet) {
      @include font-size(10);
    }
  }

Global

The settings within the HTML and BODY tags set the precident for the rest of the type settings. The font-size of 62.5% in the HTML tag helps tell the browser to use "font-size:10px", but using percentages. This allows people who have vision impairments to bump the font size up. Then you do another reset at the body level, which for me, I use 18px font sizes.

// Global
  html {
    font-size: 62.5%;
  }
  body {
    font-family: $font-family-body;
    @extend .t-18;
    line-height: $font-lineheight-normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

Classes

For setting up my type features, I put everything in classes. It allows for me to reuse different settings outside the HTML tags. For example, if I want to use an H2 size setting outside the H2 HTML tag, then I can use @extend .h2; or add the .h2 class within my HTML.

// Classes
  // Headers
  .header {
    font-family: $font-family-heading;
    line-height: $font-lineheight-small;
  }
  .h1 {
    @extend .header;
    @extend .t-56;
  }
  .h2 {
    @extend .header;
    @extend .t-48;
  }
  .h3 {
    @extend .header;
    @extend .t-36;
  }
  .h4 {
    @extend .header;
    @extend .t-24;
  }
  .h5 {
    @extend .header;
    @extend .t-21;
  }
  .h6 {
    @extend .header;
    @extend .t-16;
  }

  // Displays
  .display {
    font-family: $font-family-heading;
    line-height: $font-lineheight-small;
  }
  .d1 {
    @extend .display;
    @extend .t-96;
  }
  .d2 {
    @extend .display;
    @extend .t-81;
  }
  .d3 {
    @extend .display;
    @extend .t-72;
  }
  .d4 {
    @extend .display;
    @extend .t-64;
  }

  // Paragraphs
  .paragraph {
    font-family: $font-family-body;
  }
  .p-normal {
    @extend .paragraph;
    @extend .t-18;
  }
  .p-small {
    @extend .paragraph;
    @extend .t-14;
  }
  .p-large {
    @extend .paragraph;
    @extend .t-24;
  }
  
  // User Interface
  .ui {
    @extend .t-14;
    letter-spacing: .005em;
    line-height: $font-lineheight-small;
    text-transform: uppercase;
  }
  
  // Nav
  .nav a {
    @extend .ui;
  }

HTML Tags

For my actual HTML tag styles, I extend the matching classes for each tag. If needed, I can add extra styles, such as margins and paddings, which I will cover in a later guide. For user interface elements, I have a class set of .text-ui for things like labels, navigation or any non-copy text elements.

Samples

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6

Display 1

Display 2

Display 3

Display 4

Paragraph Normal is a normal paragraph. It can be used for paragraphs that need to be a normal paragraph size. What a well sized paragraph.

Paragraph Small is small paragraph. It can be used for paragraphs that need to be smaller than the normal paragraph. What a small paragraph.

Paragraph Large is a large paragraph. It can be used for paragraphs that need to be larger than the normal paragraph. What a great paragraph it is.

Strong Text

Italic Text

Strikethru Text

Link

  • List Item 1
  • List Item 2
  • List Item 3

Blockquote

// HTML Tags
  // HTML Headers
  h1 {
    @extend .h1;
  }
  h2 {
    @extend .h2;
  }
  h3 {
    @extend .h3;
  }
  h4 {
    @extend .h4;
  }
  h5 {
    @extend .h5;
  }
  h6 {
    @extend .h6;
  }
  
  // HTML Paragraphs
  p {
    @extend .paragraph;
  }
  p.small {
    @extend .p-small;
  }
  p.large {
    @extend .p-large;
  }
  
  // HTML Inline
  strong {
    font-weight: $font-weight-bold
  }
  em {
    font-style: oblique
  }
  s {
    text-decoration: line-through
  }
  
  // HTML Links
  a {
    text-decoration: none;
    &:hover {}
  }
  
  // HTML Lists
  ul, ol {
    li {
      @extend .paragraph;
    }
  }
  
  // HTML Labels
  label {
    @extend .ui;
  }
  
  // HTML Blockquote
  blockquote {
    @extend .p-large;
  }

Full System

// Variables
  // Font Family
  $font-family-heading: Helvetica;
  $font-family-body: Times New Roman;

  // Line Height
  $font-lineheight-small: 1.1;
  $font-lineheight-normal: 1.3;
  $font-lineheight-large: 1.5;

  // Font Weight
  $font-weight-light: 300;
  $font-weight-normal: 400;
  $font-weight-bold: 700;

  // Media Queries
  // Usage: @media (min-width: $mq-tablet) {code};
  $mq-ip5: 321px;
  $mq-ip6: 375px;
  $mq-ip6p: 414px;
  $mq-phonexl: 576px;
  $mq-tablet: 768px;
  $mq-laptop: 992px;
  $mq-desktop: 1200px;
  $mq-wide: 1400px;

// Mixins
  // Usage: @include font-size(16);
  @mixin font-size($sizeValue: 16) {
    font-size: $sizeValue + px;
    font-size: ($sizeValue / 10) + rem;
  }

// Size System
  // Usage: @extend .t-96;
  .t-96 {
    @include font-size(81);
    @media (min-width: $mq-tablet) {
      @include font-size(96);
    }
  }
  .t-81 {
    @include font-size(72);
    @media (min-width: $mq-tablet) {
      @include font-size(81);
    }
  }
  .t-72 {
    @include font-size(64);
    @media (min-width: $mq-tablet) {
      @include font-size(72);
    }
  }
  .t-64 {
    @include font-size(56);
    @media (min-width: $mq-tablet) {
      @include font-size(64);
    }
  }
  .t-56 {
    @include font-size(48);
    @media (min-width: $mq-tablet) {
      @include font-size(56);
    }
  }
  .t-48 {
    @include font-size(36);
    @media (min-width: $mq-tablet) {
      @include font-size(48);
    }
  }
  .t-36 {
    @include font-size(32);
    @media (min-width: $mq-tablet) {
      @include font-size(36);
    }
  }
  .t-32 {
    @include font-size(28);
    @media (min-width: $mq-tablet) {
      @include font-size(32);
    }
  }
  .t-28 {
    @include font-size(24);
    @media (min-width: $mq-tablet) {
      @include font-size(28);
    }
  }
  .t-24 {
    @include font-size(21);
    @media (min-width: $mq-tablet) {
      @include font-size(24);
    }
  }
  .t-21 {
    @include font-size(18);
    @media (min-width: $mq-tablet) {
      @include font-size(21);
    }
  }
  .t-18 {
    @include font-size(16);
    @media (min-width: $mq-tablet) {
      @include font-size(18);
    }
  }
  .t-16 {
    @include font-size(14);
    @media (min-width: $mq-tablet) {
      @include font-size(16);
    }
  }
  .t-14 {
    @include font-size(12);
    @media (min-width: $mq-tablet) {
      @include font-size(14);
    }
  }
  .t-12 {
    @include font-size(10);
    @media (min-width: $mq-tablet) {
      @include font-size(12);
    }
  }
  .t-10 {
    @include font-size(8);
    @media (min-width: $mq-tablet) {
      @include font-size(10);
    }
  }

// Global
  html {
    font-size: 62.5%;
  }
  body {
    font-family: $font-family-body;
    @extend .t-18;
    line-height: $font-lineheight-normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

// Classes
  // Headers
  .header {
    font-family: $font-family-heading;
    line-height: $font-lineheight-small;
  }
  .h1 {
    @extend .header;
    @extend .t-56;
  }
  .h2 {
    @extend .header;
    @extend .t-48;
  }
  .h3 {
    @extend .header;
    @extend .t-36;
  }
  .h4 {
    @extend .header;
    @extend .t-24;
  }
  .h5 {
    @extend .header;
    @extend .t-21;
  }
  .h6 {
    @extend .header;
    @extend .t-16;
  }

  // Displays
  .display {
    font-family: $font-family-heading;
    line-height: $font-lineheight-small;
  }
  .d1 {
    @extend .display;
    @extend .t-96;
  }
  .d2 {
    @extend .display;
    @extend .t-81;
  }
  .d3 {
    @extend .display;
    @extend .t-72;
  }
  .d4 {
    @extend .display;
    @extend .t-64;
  }

  // Paragraphs
  .paragraph {
    font-family: $font-family-body;
  }
  .p-normal {
    @extend .paragraph;
    @extend .t-18;
  }
  .p-small {
    @extend .paragraph;
    @extend .t-14;
  }
  .p-large {
    @extend .paragraph;
    @extend .t-24;
  }
  
  // User Interface
  .ui {
    @extend .t-14;
    letter-spacing: .005em;
    line-height: $font-lineheight-small;
    text-transform: uppercase;
  }
  
  // Nav
  .nav a {
    @extend .ui;
  }

// HTML Tags
  // HTML Headers
  h1 {
    @extend .h1;
  }
  h2 {
    @extend .h2;
  }
  h3 {
    @extend .h3;
  }
  h4 {
    @extend .h4;
  }
  h5 {
    @extend .h5;
  }
  h6 {
    @extend .h6;
  }
  
  // HTML Paragraphs
  p {
    @extend .paragraph;
  }
  p.small {
    @extend .p-small;
  }
  p.large {
    @extend .p-large;
  }
  
  // HTML Inline
  strong {
    font-weight: $font-weight-bold
  }
  em {
    font-style: oblique
  }
  s {
    text-decoration: line-through
  }
  
  // HTML Links
  a {
    text-decoration: none;
    &:hover {}
  }
  
  // HTML Lists
  ul, ol {
    li {
      @extend .paragraph;
    }
  }
  
  // HTML Labels
  label {
    @extend .ui;
  }
  
  // HTML Blockquote
  blockquote {
    @extend .p-large;
  }

Get Started Today

Ready to build a website that can stand the test of time? Let's schedule a call to learn how we can build a website that lasts.

Schedule a call

Gain More Insights

Subscribe to be a step ahead, having the knowledge and tools necessary for the future of design & business.