Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Responsive Typography with Sass

2,721 views

Published on

You can tell a site has been programmed hastily when they try using the same 40px headline size on a mobile screen as they do on a large 4K display. Unfortunately, most of our RWD effort is spent on menus, grid systems, image sizes, and collapsible content. When that's the case, we fail to make the most basic component of the page responsive: typography.

In this talk, we'll look at what responsive typography is, why it's necessary, and how to implement it quickly with Sass.

Published in: Technology

Responsive Typography with Sass

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

×