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 DoesResponsive Typography

Matter?

How Do We MakeResponsive 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