Responsive Typography · Responsive Typography • Changing values at breakpoints • Base font...
Transcript of Responsive Typography · Responsive Typography • Changing values at breakpoints • Base font...
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; }