New

Try out the Ether System React starter kit!

View on Github

Github

See how we structured and built this site using Ether to power all of its styling.

CodePen

Browse source code, generators, and examples of how Ether's libraries work.

Medium

Read the rationale behind the libraries along with other design system lessons.

About

Visit The Scenery

Meet the team behind Ether and see what else we work on during the day.

Contact

Get In Touch

If you need help implementing Ether on your own project or product, just holler.

Typography

Intro to Typography

The Ether Typography System is designed to generate a spectrum of typography sizes with a mathematically-derived hierarchy. It works using a Base Size and Scale Modifier ratio.

Base Size determines the starting (and smallest) size for the system. It usually corresponds to the fine-print style in our sites and applications. Generally we suggest that this number increase at smaller breakpoints to create a larger size set that is more readable on mobile devices.

The Scale Modifier ratio determines the incremental change in hierarchy as the system progresses from size to size. This ratio can be anything (rule of thirds, golden ratio, etc)—the closer to 1 the less change will occur between base sizes. Generally we suggest that this number decreases at smaller breakpoints to create a less-wildly variable set of sizes to maximize screen real-estate.

Output text sizes are rounded because the generated values can be messy. This allows us to more effectively match real sizes in code to sizes in Sketch and design files.

Core Principles

Don’t want to read the article? Here’s the long and short of it.

  1. Balance utility of type with brevity of styles
  2. Establish clear, simple hierarchy in sizing
  3. Decouple visual style from code
  4. Eliminate need to spec every size across the system

Code

To generate the Ether Typography System, three separate files are necessary.

  1. Fonts will define the font families and weights for our system.
  2. Type Size will generate typography sizes through mixins.
  3. Type Variables will generate each typography style by combining fonts, sizes, and any other variations the system requires.

We highly recommend using a CSS pre-processor such as Sass to work with variables. If CSS Variable support is desired, you will need to add a PostCSS script to your build system in order to use this feature in all browsers.

For CSS Variable support, we recommend post-css-variables. The example code will be in Sass.

_fonts.scss

Below is an example of creating two primary font styles. If the design calls for a secondary font, include it in this step. The primary font is Sentinel which is available at Hoefler & Co.

1
2
3
4
5
6
7
8
9
10
11
12
// Primary Font
@mixin font--primary-light {
  font-family: "Sentinel SSm A", "Sentinel SSm B", serif;
  font-style: normal;
  font-weight: 300;
}

@mixin font--primary-regular {
  font-family: "Sentinel SSm A", "Sentinel SSm B", serif;
  font-style: normal;
  font-weight: normal;
}

_type-size.scss

Now that we have a nice set of fonts, we can generate sizes. This file will set the Base Size of the typography system as well as the Scale Modifier to generate the additional size options.

We are using the ex unit to define our font sizes. The ex unit is equal to a font's x-height, so it will be relative to the font-size (like an em). It is well-supported in all major browsers.

Further information: the ex unit

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$desk-d: 1.3;      // Desktop Scale Modifier
$mobile-d: 1.2;    // Mobile Scale Modifier

// Desktop Sizes
$d-b0: 1.6ex;
$d-b1: $d-b0 * $desk-d;
$d-b2: $d-b1 * $desk-d;
$d-b3: $d-b2 * $desk-d;
$d-b4: $d-b3 * $desk-d;
$d-b5: $d-b4 * $desk-d;
$d-b6: $d-b5 * $desk-d;

// Mobile Sizes
$m-b0: 1.7ex;
$m-b1: $m-b0 * $mobile-d;
$m-b2: $m-b1 * $mobile-d;
$m-b3: $m-b2 * $mobile-d;
$m-b4: $m-b3 * $mobile-d;
$m-b5: $m-b4 * $mobile-d;
$m-b6: $m-b5 * $mobile-d;

Now mixins can be used to generate all seven available sizes.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// Size 0
@mixin size--base-0 {
  // Mobile font size
  font-size: $m-b0;

  @include breakpoint(sm) { // taken from mixins.scss
    // Desktop font size
    font-size: $d-b0;
  }
}

// ... Size 1 through 5

// Size 6
@mixin size--base-6 {
  font-size: $m-b6;
  @include breakpoint(sm) {
    font-size: $d-b6;
  }
}

_type-variables.scss

We have the fonts and we have the sizes! Let's bring them all together! This file will generate mixins which house all the individual parts which make up a typography style. Here, we will demonstrate heading and body styles that can be implemented throughout the design system.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
@import
  "typography/_fonts",
  "typography/_type-size";

// Heading XXLarge
@mixin heading-xxlarge {
  @include size--base-6;
  @include font--primary-light;
  line-height: 1.2;
}

// Body
@mixin body {
  @include size--base-1;
  @include font--primary-regular;
  line-height: 1.5;
}

// Fine Print
@mixin fine-print {
  @include size--base-0;
  @include font--primary-regular;
  line-height: 1.5;
}

Implementation

We have everything we need to implement the typography system throughout our design system's code. For example, here's a few examples of heading and body styles.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// Heading Styles
.heading-xxlarge {
  @include heading-xxlarge;
  color: $type--dark;
}

// Body Copy Styles
.description {
  @include body;
  color: $type--medium;
}

// Small Type (Fine Print) Styles
.legalease {
  @include fine-print;
  color: $type--light;
}