Responsive
Typography
Using Sass to Keep Things Legible

What Is
Responsive Typography?

Web Typography
• Font faces
• Sizes & scale
• Line height & vertical rhythm
• Line length

Responsive Typography
• Changing values at breakpoints
• Base font size
• Scale interval
• Vertical Rhythm

Why Does
Responsive Typography
Matter?

How Do We Make
Responsive Typography
Easy?

to the Rescue!

Map for Storing Data
• Breakpoint widths
• Typography values
• Base font-size
• Scale
• Vertical Rhythm

Map
$rwd-typography: (
default: (
base-font-size: 16px,
vertical-rhythm: 1.414,
type-scale: 1.2,
min-width: null
),
);

Map
$rwd-typography: (
medium: (
base-font-size: 18px,
vertical-rhythm: 1.5,
type-scale: 1.414,
min-width: 480px
),
);

Map
$rwd-typography: (
large: (
base-font-size: 20px,
vertical-rhythm: 1.618,
type-scale: 1.5,
min-width: 960px
),
);

Map
$rwd-typography: (
xlarge: (
base-font-size: 24px,
vertical-rhythm: 1.618,
type-scale: 1.618,
min-width: 1300px
)
);

List for Storing Labels
• Generate multiple font-sizes on a
consistent scale
• Labels to assign those sizes to

List
$rwd-labels: (
p,
bq,
sh,
h,
hero
);

Loop through Labels
@each $label in $rwd-labels {
%#{$label} {
// loop through
breakpoints
}
}

Loop through Breakpoints
@each $bp, $data in $rwd-
typography {
// $bp = key
// $data = value: nested map
// font-size: ?;
// line-height: ?;
}

Get Font-Size
@function rwd-get-font-size($label, $bp) {
$base—font-size: map-get(map-get($rwd-
typography, $bp), base-font-size);
$type-scale: map-get(map-get($rwd-typography,
$bp), type-scale);
$return: $base-font-size;
@for $i from 1 to index($rwd-labels, $label) {
$return: $return * $type-scale;
}
@return $return;
}

Get Line-Height
@function rwd-get-font-size($label, $bp) {
// same as before, but new var - $font-size
$font-size: X;
$vertical-rhythm: map-get(map-get($rwd-
typography, $bp), vertical-rhythm);
$vertical-rhythm: $base-font-size *
$vertical-rhythm;
$line-height: ceil($font-size / $vertical-
rhythm) * $vertical-rhythm / $font-size;
$return: join($font-size, $line-height);
@return $return;
}

Using the Values
$values: rwd-generate-font-
size($label, $bp);
font-size: nth($values, 1);
line-height: nth($values, 2);

Extending the Labels
body { @extend %p; }
blockquote { @extend %bq; }
h2 { @extend %sh; }
h1 { @extend %h1; }
.hero { @extend %hero; }

IRL
SassMeister Gist

James Steinbach
jamessteinbach.com
jdsteinbach@gmail.com
@jdsteinbach
/jdsteinbach

CLT Sass
cltsass.com
info@cltsass.com
@CLTSass