Successfully reported this slideshow.

Responsive Typography with Sass

7

Share

Upcoming SlideShare
SVGD3Angular2React
SVGD3Angular2React
Loading in …3
×
1 of 27
1 of 27

Responsive Typography with Sass

7

Share

Download to read offline

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.

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.

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

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

×