Responsive Typography

Hello, I'm Zell

Freelance developer in Singapore

Learning Susy
Automate Your Workflow
Mastering Responsive Typography (releasing this soon!)

Responsive Typography

Today

What is good typography
What typography practices you should follow
What responsive typography practices you should use
Some ugly code
Cleaner code

What is good typography?

Typography helps text communicate

Good typography

Communicates the right emotions (or lack thereof)
Easy to read

Good typography

Communicates the right emotions (or lack thereof)
Easy to read

3 Important Properties

Font-size
Leading (line height)
Measure (width of text)

Determining Font-size

Dorothy lived in the midst of the great Kansas prairies, with Uncle Henry, who was a farmer, and Aunt Em, who was the farmer's wife. Their house was small, for the lumber to build it had to be carried by wagon many miles. There were four walls, a floor and a roof, which made one room; and this room contained a rusty looking cookstove, a cupboard for the dishes, a table, three or four chairs, and the beds. Uncle Henry and Aunt Em had a big bed in one corner, and Dorothy a little bed in another corner. There was no garret at all, and no cellar–except a small hole dug in the ground, called a cyclone cellar, where the family could go in case one of those great whirlwinds arose, mighty enough to crush any building in its path. It was reached by a trap door in the middle of the floor, from which a ladder led down into the small, dark hole.

Determing Measure

Determining Leading

When Dorothy stood in the doorway and looked around, she could see nothing but the great gray prairie on every side. Not a tree nor a house broke the broad sweep of flat country that reached to the edge of the sky in all directions. The sun had baked the plowed land into a gray mass, with little cracks running through it. Even the grass was not green, for the sun had burned the tops of the long blades until they were the same gray color to be seen everywhere. Once the house had been painted, but the sun blistered the paint and the rains washed it away, and now the house was as dull and gray as everything else.

Leading is affected by

Font-size
Measure

Font-size, Leading and Measure

html {
  font-size: 16px; // Minimum of 16px on mobile
  line-height: 1.4; // 1.3 - 1.6
}

p {
  width: 30em; // 45 - 75 characters
}

Typography Best Practices

Modular Scale
Vertical Rhythm

Modular Scale

Using Modular Scale

html { font-size: 16px; }
h1 { font-size: 50.517px; } // 16px * 1.333 * 1.333 * 1.33 * 1.33
h2 { font-size: 37.897px; } // 16px * 1.333 * 1.333 * 1.33
h3 { font-size: 28.430px; } // 16px * 1.333 * 1.333

Vertical Rhythm

Using Vertical Rhythm

Vertical white space between elements to a multiple of 24px.
Line-height of all text elements to a multiple of 24px.

Using Vertical Rhythm

html {
	line-height: 24px;
}

h1 {
  line-height: 48px;
  margin: 24px 0;
}

p {
  margin: 24px 0;
}

Creating a Baseline Grid

body {
	background: repeating-linear-gradient(
	to bottom,
	transparent 0px,
	transparent 23px,
	red 23px,
	red 24px
);
							}

Modular Scale + Vertical Rhythm

html {
	font-size: 16px;
	line-height: 24px;
}

h1 { font-size: 50px; }  // 1.333 * 1.333 * 1.333 * 1.333

Modular Scale + Vertical Rhythm

html {
	font-size: 16px;
	line-height: 24px;
}

h1 {
	font-size: 50px;
  line-height: 72px; // 24px * 3;
}

This is a header with two lines of text

Modular Scale + Vertical Rhythm

h1 {
	font-size: 50px;
  line-height: 48px; // 24px * 2. Line height of 0.96
}

This is a header with two lines of text

Modular Scale + Vertical Rhythm

h1 {
	font-size: 50px;
  line-height: 60px; // 60px = 2.5 * 24px. Line height = 1.2
}

This is a header with two lines of text

The Principle of Repetition

Principle of Repetition

Other design principles

Contrast
Alignment
Proximity

Responsive Typography Best Practices

Change font-size when screen width changes
Use Relative Units
Change header sizes whenever necessary
Maintain Vertical Rhythm

Changing Font-size

Changing Font-size when screen width changes

html {
	font-size: 16px;
	@media (min-width: 600px) {
		font-size: 18px;
	}
	@media (min-width: 1000px) {
		font-size: 20px;
	}
}

Use Relative Units

Converting to Relative Units

html {
	font-size: 16px;
	@media (min-width: 600px) {
		font-size: 18px;
	}
}

h1 {
	font-size: 50.517px;
	@media (min-width: 600px) {
		font-size: 56.83px;
	}
}
// ... and so on

Converting to Relative Units

html {
	font-size: 16px;
	@media (min-width: 600px) {
		font-size: 18px;
	}
}

h1 { font-size: 3.157rem } // 1.333 * 1.333 * 1.333 * 1.333
h3 { font-size: 2.369rem } // 1.333 * 1.333 * 1.333
h2 { font-size: 1.777rem } // 1.333 * 1.333

Use Relative Units

Em

An EM is a unit of typography, equal to the currently specified point-size

Em

h1 { font-size: 20px } /* 1em = 20px */
p { font-size: 16px } /* 1em = 16px */

Using Em on font-size property

html { font-size: 16px }
h1 { font-size: 2em } /* 16px * 2 = 32px */

Using Em on other properties

h1 {
  font-size: 2em; /* 1em = 16px */
  margin-bottom: 1em; /* 1em = 32px */
}

p {
  font-size: 1em; /* 1em = 16px */
  margin-bottom: 1em; /* 1em = 16px */
}

Rem

An REM is a unit of typography, equal to the root font-size

Rem

html { font-size: 16px } /* 1rem === 16px, always */

Using Rem on other properties

h1 {
  font-size: 2rem; /* 1rem = 16px */
  margin-bottom: 1rem; /* 1rem = 16px */
}

p {
  font-size: 1rem; /* 1rem = 16px */
  margin-bottom: 1rem; /* 1rem = 16px */
}

Rem or Em?

Rem vs Em – The Great Debate

Rem for global sizing
Em for local sizing

Using Relative Units

html {
	font-size: 16px;
	@media (min-width: 600px) {
		font-size: 18px;
	}
}

h1 { font-size: 3.157rem; } // 1.333 * 1.333 * 1.333 * 1.333
h2 { font-size: 2.369rem; } // 1.333 * 1.333 * 1.333
h3 { font-size: 1.777rem; } // 1.333 * 1.333

Fluid typography?

Fluid typography

html {
  font-size: calc(1em + 0.25vw);
}

h1 { font-size: 3.157rem; } // 1.333 * 1.333 * 1.333 * 1.333
h2 { font-size: 2.369rem; } // 1.333 * 1.333 * 1.333
h3 { font-size: 1.777rem; } // 1.333 * 1.333

Fluid typography

html {
  font-size: 1em;

  // Scales by 1px for every 100px from 600px onwards
  @media (min-width: 600px) {
    font-size: calc(1.125em + 4 * (100vw - 600px) / 400);
  }

  // Sets font-size to 22px after a viewport of 1000px
  @media (min-width: 1000px) {
    font-size: 1.375em;
  }
}
// h1, h2, h3...

Changing header sizes

html {
	font-size: 16px;
	@media (min-width: 600px) {
		font-size: 18px;
	}
}

h1 { font-size: 3.157rem; } // 1.333 * 1.333 * 1.333 * 1.333
h2 { font-size: 2.369rem; } // 1.333 * 1.333 * 1.333
h3 { font-size: 1.777rem; } // 1.333 * 1.333

html {
	font-size: 16px;
	@media (min-width: 600px) {
		font-size: 18px;
	}
}

h1 {
	font-size: 2.369rem; // 1.333 * 1.333 * 1.333
	@media (min-width: 600px) {
		font-size: 3.157rem; // 1.333 * 1.333 * 1.333 * 1.333
	}
}

h1 {
	font-size: 2.369rem; // 1.333 * 1.333 * 1.333
	@media (min-width: 600px) {
		font-size: 3.157rem; // 1.333 * 1.333 * 1.333 * 1.333
	}
}

h2 {
	font-size: 1.777rem; // 1.333 * 1.333
	@media (min-width: 600px) {
		font-size: 2.369rem; // 1.333 * 1.333 * 1.333
	}
}

h3 {
	font-size: 1.333rem; // 1.333
	@media (min-width: 600px) {
		font-size: 1.777rem; // 1.333 * 1.333
	}
}
// ...

There is a way to fix this madness!

Maintain Vertical Rhythm

html {
  line-height: 1.4;
  @media (min-width: 1000px) {
    line-height: 1.5;
  }
}

Maintain Vertical Rhythm

h1 {
  margin: 1.4rem;
  @media (min-width: 1000px) {
    margin 1.5rem;
  }
}

h2 {
  margin: 1.4rem;
  @media (min-width: 1000px) {
    margin 1.5rem;
  }
}
//... Every property that requires Vertical Rhythm calculation!

😱

A Potential Solution with CSS Variables

:root {
  --baseline: 1.4;
  @media (min-width: 1000px) {
    --baseline: 1.5;
  }
}

html { line-height: var(--baseline); }
h1 { margin: calc(var(--baseline) * 2); }

So... don't change your baseline! (until Edge ships CSS Variables)

So... don't change your baseline! (or use @supports if you don't care about Edge)

Fixing the Media Query Madness

Introducing Typi

https://github.com/zellwk/typi

Using Typi (body text)

// Configuring Typi
\$breakpoints: (
  small: 600px,
  large: 1000px
);

\$typi: (
  null: (16px, 1.4),
  small: 18px,
  large: (20px, 1.5)
);

 // Using Typi
html {
	@include typi-base();
}

Typi (body text)

 /* CSS Output */
html {
  font-size: 100%;
  line-height: 1.4;
}

@media all and (min-width: 600px) {
  html {
    font-size: 112.5%;
  }
}

@media all and (min-width: 1000px) {
  html {
    font-size: 125%;
    line-height: 1.5;
  }
}

Typi (headers and other elements)

// Scss input
\$h1-map: (
  null: (2.369em, 1.2),
  large: (3.157em, 1.3)
);

h1 { @include typi(\$h1-map); }

Typi (headers and other elements)

/* CSS Output */
h1 {
  font-size: 2.369rem;
  line-height: 1.2;
}

@media all and (min-width: 1000px) {
  h1 {
    font-size: 3.157rem;
    line-height: 1.3;
  }
}

Typi with Modular Scale

// Scss input
\$ms-ratio: 1.333;
\$h1-map: (
  null: (ms(2), 1.2),
  large: (ms(3), 1.3)
);

\$h2-map: (
  null: (ms(1), 1.2),
  large: ms(2)
);

h1 { @include typi(\$h1-map); }
h2 { @include typi(\$h2-map); }

Typi with Modular Scale

/* CSS Output */
h1 {
  font-size: 2.369rem;
  line-height: 1.2;
}

@media all and (min-width: 1000px) {
  h1 {
    font-size: 3.157rem;
    line-height: 1.3;
  }
}

h2 {
  font-size: 2.369rem;
}

@media all and (min-width: 1000px) {
  h2 {
    font-size: 1.777rem;
  }
}

The code so far ...

// Configure Typi
\$breakpoints: (/* ... */);
\$typi: (/* ... */);

// Use Typi
html { @include typi-base(); }
h1 { @include typi(\$h1-map); }
h2 { @include typi(\$h2-map); }
h3 { @include typi(\$h3-map); }

Vertical Rhythm with Typi

html {
	font-size: 100%;
	line-height: 1.5;
}

h1 {
	margin: 24px;
	line-height: 60px;
}

Vertical Rhythm with Typi

html {
	font-size: 100%;
	line-height: 1.5;
}

h1 {
	margin: 1.5rem; // 1.5rem == 24px. 1 Baseline
	line-height: 3.75rem; // 3.75rem == 60px. 2.5 Baselines
}

Vertical Rhythm

html {
  font-size: 100%;
  line-height: 1.5;
}

h1 {
	margin: vr(1); // 1 Baseline
	line-height: vr(2.5); // 2.5 Baselines
}

Have fun with Typi!

https://github.com/zellwk/typi/

Thank you!

Responsive Typography

Responsive Typography

zellwk

Responsive Typography

0 4 (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/platform.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();