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.
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
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.
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.
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.
Determining Leading
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.
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. The nuckelavee's breath can wilt crops and sicken livestock, and the creature was held responsible for droughts and epidemics on land despite its being predominantly a sea-dweller.
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
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.333Vertical 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
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
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.
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
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.
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
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.
The Principle of Repetition
Principle of Repetition
Other design principles
- Contrast
- Alignment
- Proximity
Responsive Typography
Best Practices
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
- Rem
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 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
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
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
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
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
}