Advertisement

Responsive Typography with Sass

Senior Front-End Developer
Apr. 30, 2015
Advertisement

More Related Content

Advertisement

Responsive Typography with Sass

  1. Responsive Typography Using Sass to Keep Things Legible
  2. What Is 
 Responsive Typography?
  3. Web Typography • Font faces • Sizes & scale • Line height & vertical rhythm • Line length
  4. Responsive Typography • Changing values at breakpoints • Base font size • Scale interval • Vertical Rhythm
  5. Why Does
 Responsive Typography
 Matter?
  6. How Do We Make
 Responsive Typography
 Easy?
  7. to the Rescue!
  8. Map for Storing Data • Breakpoint widths • Typography values • Base font-size • Scale • Vertical Rhythm
  9. Map $rwd-typography: ( default: ( base-font-size: 16px, vertical-rhythm: 1.414, type-scale: 1.2, min-width: null ), );
  10. Map $rwd-typography: ( medium: ( base-font-size: 18px, vertical-rhythm: 1.5, type-scale: 1.414, min-width: 480px ), );
  11. Map $rwd-typography: ( large: ( base-font-size: 20px, vertical-rhythm: 1.618, type-scale: 1.5, min-width: 960px ), );
  12. Map $rwd-typography: ( xlarge: ( base-font-size: 24px, vertical-rhythm: 1.618, type-scale: 1.618, min-width: 1300px ) );
  13. List for Storing Labels • Generate multiple font-sizes on a consistent scale • Labels to assign those sizes to
  14. List $rwd-labels: ( p, bq, sh, h, hero );
  15. Loop through Labels @each $label in $rwd-labels { %#{$label} { // loop through breakpoints } }
  16. Loop through Breakpoints @each $bp, $data in $rwd- typography { // $bp = key // $data = value: nested map // font-size: ?; // line-height: ?; }
  17. 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; }
  18. 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; }
  19. Using the Values $values: rwd-generate-font- size($label, $bp); font-size: nth($values, 1); line-height: nth($values, 2);
  20. Extending the Labels body { @extend %p; } blockquote { @extend %bq; } h2 { @extend %sh; } h1 { @extend %h1; } .hero { @extend %hero; }
  21. IRL SassMeister Gist
  22. James Steinbach jamessteinbach.com jdsteinbach@gmail.com @jdsteinbach /jdsteinbach
  23. CLT Sass cltsass.com info@cltsass.com @CLTSass
Advertisement