Responsive Typography with Sass
7 likes3,058 views
This document discusses using Sass to implement responsive typography. It describes storing breakpoint widths, typography values like font sizes and line heights in Sass maps. These values are then looped through to generate responsive font sizes and line heights for different labels like headings, paragraphs etc. Functions are used to retrieve the font sizes and line heights from the maps based on the breakpoint and label. The values are then applied using CSS. This allows easy implementation of responsive typography in a maintainable way.
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
- 10. How Do We Make Responsive Typography Easy?
- 11. to the Rescue!
- 12. Map for Storing Data • Breakpoint widths • Typography values • Base font-size • Scale • Vertical Rhythm
- 13. Map $rwd-typography: ( default: ( base-font-size: 16px, vertical-rhythm: 1.414, type-scale: 1.2, min-width: null ), );
- 14. Map $rwd-typography: ( medium: ( base-font-size: 18px, vertical-rhythm: 1.5, type-scale: 1.414, min-width: 480px ), );
- 15. Map $rwd-typography: ( large: ( base-font-size: 20px, vertical-rhythm: 1.618, type-scale: 1.5, min-width: 960px ), );
- 16. Map $rwd-typography: ( xlarge: ( base-font-size: 24px, vertical-rhythm: 1.618, type-scale: 1.618, min-width: 1300px ) );
- 17. List for Storing Labels • Generate multiple font-sizes on a consistent scale • Labels to assign those sizes to
- 19. Loop through Labels @each $label in $rwd-labels { %#{$label} { // loop through breakpoints } }
- 20. Loop through Breakpoints @each $bp, $data in $rwd- typography { // $bp = key // $data = value: nested map // font-size: ?; // line-height: ?; }
- 21. 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; }
- 22. 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; }
- 23. Using the Values $values: rwd-generate-font- size($label, $bp); font-size: nth($values, 1); line-height: nth($values, 2);
- 24. Extending the Labels body { @extend %p; } blockquote { @extend %bq; } h2 { @extend %sh; } h1 { @extend %h1; } .hero { @extend %hero; }