Responsive Text

This module provides rudimentary font resizing based on the width of the viewport. It is rudimenary in that it does not provide smooth scaling like RFS, nor does it provide mixins or other tools for ease of use.

Instead, the goals of this module are:

To keep things simple, the responsive text module creates two font size alternatives: smaller font sizes for small screen widths and a larger font sizes for large screen widths. The default font sizes are used at middle screen widths.

Variables

The responsive text module provides variables that can be altered to customize the responsive text behavior:

$tybreak-font-sm
40em !default;
Screen width below which the font size decreases from the default base size.
$tybreak-font-lg
80em !default;
Screen width above which the font size increases from the default base size.
$tyfont-size-adjustment
0.9 !default;
The value used to increase or decrease font sizes. This value should be less than 1. A value of 1 would result in no size adjustment.

Implementation

To decrease a font size from the default, the font size is multiplied by the adjustment value; to increase the size, the size is divided by the adjustment value. Consider this example of how the font size of the level 1 heading (<h1>) is responsively styled by the module:

h1 {
  @media (max-width:$tybreak-font-sm - 1em/32) {
    font-size:tyfont-size(h1) * $tyfont-size-adjustment;
    line-height:tylead((tyfont-size(h1) * $tyfont-size-adjustment),heading);
  }
  @media (min-width:$tybreak-font-lg) {
    font-size:tyfont-size(h1) / $tyfont-size-adjustment;
    line-height:tylead((tyfont-size(h1) / $tyfont-size-adjustment),heading);
  }
}

As shown in the example, both the font size and line height are responsively styled. This preserves the baseline grid.