Responsive Page Text

README.md

Responsive font-size and line-height mixins

Mixins for LESS and Sass (.scss) to make all page text —font sizes and line heights— responsive

Set your font-sizes and line-heights with these mixins, set a mobile scale factor, and all text on your page will scale down automagically.

Want some text to scale differently? Use a media query to give that text a different full-size value for mobile.

Want some text to always stay the same size? Want some text to keep its font size while scaling its line height? Want some text to keep its line height while scaling its font size? Just don't use the mixin for the things you want to keep constant, or override the mixin with an explicit style.

By default, these mixins scale mobile line height inversely to the mobile font size, to make reading small text easier. To have line height scale proportionally to font size, simply change the mobile-line-height to lh / fz * mobile-text-factor.

Demos:

• LESS: https://codepen.io/henry/pen/brOzZw?editors=1100

• Sass (.scss): https://codepen.io/henry/pen/qXLwZa?editors=1100

  

Usage

1. Set variables

   name	argument	default	what is it?
   fz	{number}, unitless	14	page base font-size (e.g. if designed at 14px, 14)
   lh	{number}, unitless	18	page base line-height (e.g. if designed at 18px, use 18)
   mobile-font-size-factor	{number}, unitless	.74	the factor by which to sclae font size on mobile
   mobile-line-height-factor	{number}, unitless	mobile-font-size-factor * 5/4	the factor by which to scale line height on mobile

2. Set font-size and line-height with the mixins

   mixin	argument	default	what does it do?
   fz()	{number} pixel font size / 1px	fz	sets font size
   lh()	{number} ratio of line height to font size	lh	sets line height
   fzlh()	{number,number} arg1: unitless font size arg2: unitless line height	fz, lh	shorthand to set both fz() and lh()

   Note that on a consistently typeset site,

   Examples

   • Setting font size to 20px and line height to 24px:

      // LESS
      my-target {
        .fzlh(20,24)
      }

      // Sass.scss
      my-target {
        @include fzlh(20,24)
      }

   • Setting font size to 20px:

      // LESS
      my-target {
        .fz(20)
      }

      // Sass.scss
      my-target {
        @include fz(20)
      }

   • Setting line spacing to double-spaced:

      // LESS
      my-target {
        .lh(2)//
      }

      // Sass.scss
      my-target {
        @include lh(2)
      }

responsive-page-text--sample.less

// example usage
h5, h6 {
  text-transform: uppercase
}
h5, h3 {
  font-weight: 400
}
h1 {
  .fz(40);
  @media (max-width: 768px) {
    .fz(30)
  }
}
h2 {
  .fzlh(30,40);
  @media (max-width: 900px) {
    .fz(24)
  }
}
h3 {
  .fz(24)
}
h4 {
  .fz(20)
}
h5 {
  .fz(17)
}
h6 {
  .fz(15)
}

/* for demo purposes only */
* {
  font-family: sans-serif;
}

responsive-page-text--sample.scss

// example usage
h5, h6 {
  text-transform: uppercase
}
h5, h3 {
  font-weight: 400
}
h1 {
  @include fz(40);
  @media (max-width: 768px) {
    @include fz(30)
  }
}
h2 {
  @include fzlh(30,40);
  @media (max-width: 900px) {
    @include fz(24)
  }
}
h3 {
  @include fz(24)
}
h4 {
  @include fz(20)
}
h5 {
  @include fz(17)
}
h6 {
  @include fz(15)
}

/* for demo purposes only */
* {
  font-family: sans-serif;
}

responsive-page-text.less

// each of these sections can be in their own file, but order does matter

// global mixins
.fz(@font-size: @fz) {// named for the Emmet `font-size` abbreviation
  font-size: @font-size * 1rem / @fz;
}
.lh(@line-spacing: @lh / @fz) {// named for the Emmet `line-height` abbreviation
  line-height: @line-spacing;
}
.fzlh(@font-size: @fz, @line-height: @lh) {
  .fz(@font-size);
  .lh(@line-height / @font-size)
}

// site variables
@fz: 14; // provide this designed font size (pixel value; no unit)
@lh: 18; // provide this designed line height (pixel values; no unit)
@mobile-font-size-factor: .74;// customizable. 0.74 approximates the drop fb posts make from desktop to mobile app
@mobile-line-height-factor: @mobile-font-size-factor * 5/4;// customizable

// document root calculated value - don't touch
@mobile-font-size: @fz * @mobile-font-size-factor;
@mobile-line-height: @lh * @mobile-line-height-factor;

// document root styling
html {// or :root if you prefer
  font-size: @fz * 1px;
  // .fzlh();
  .lh();
  @media (max-width: 768px) {// note that this demo doesn't concern itself with the intricacies of media query breakpoints
    .fzlh(@mobile-font-size, @mobile-line-height)
  }
}

responsive-page-text.scss

// each of these sections can be in their own file, but order does matter

// global mixins
@mixin fz($font-size: $fz) {// named for the Emmet `font-size` abbreviation
  font-size: $font-size * 1rem / $fz;
}
@mixin lh($line-spacing: $lh / $fz) {// named for the Emmet `line-height` abbreviation
  line-height: $line-spacing;
}
@mixin fzlh($font-size: $fz, $line-height: $lh) {
  @include fz($font-size);
  @include lh($line-height / $font-size)
}

// site variables
$fz: 14;// provide this designed font size (pixel value; no unit)
$lh: 18;// provide this designed line height (pixel values; no unit)
$mobile-font-size-factor: .74;// customizable
$mobile-line-height-factor: $mobile-font-size-factor * 5/4;// customizable

// document root calculated value - don't touch
$mobile-font-size: $fz * $mobile-font-size-factor;
$mobile-line-height: $lh * $mobile-line-height-factor;
// document root styling
html {// or :root if you prefer
  font-size: $fz * 1px;
  @include lh();
  @media (max-width: 768px) {// note that this demo doesn't concern itself with the intricacies of media query breakpoints
    @include fzlh($mobile-font-size, $mobile-line-height)
  }
}