Contrib.social

Set font-sizes and line-heights based on a typographic scale

Open on Drupal.org →
Created on 30 January 2024, 5 months ago
Updated 6 February 2024, 5 months ago

Problem/Motivation

Font size and line height values are set inconsistently throughout the theme. In an attempt to address this and provide more consistency across a site and more easily follow how our designers approach typography, we want to implement a type system based on a typographic scale.

Proposed resolution

Add a new type scale sass map along with the needed mixins to convert it into a series of css custom properties. Update existing font-size and line-height declarations. 

$typographic-scale: (
  category1: (
    size1: (
      breakpoint1: (fontSizePixelValue, lineHeightPixelValue),
      breakpoint2: (fontSizePixelValue, lineHeightPixelValue),
      ...
    ),
    size2: ( ... ),
    ...
  ),
  category2: ( ... ),
  ...
);

Example...

$typographic-scale: (
  heading: (
    96: (
      mobile: (44, 52),
      tablet: (52, 60),
      sm-desktop: (72, 72),
      desktop: (96, 92),
    ),
    52: (
      mobile: (32, 36),
      tablet: (42, 48),
      sm-desktop: (44, 52),
      desktop: (52, 60),
    ),
   ...
  body: (
    ...
  )
);

Usage

h1 {
  @include type-scale(heading, 96);
}

Remaining tasks

Review the general approach. Determine the minimum default type-scale needed out of the box.

API changes

The @mixin font() has been replaced with a slightly different @mixin type-scale().

✨ Feature request
Status

Fixed

Version

5.0

Component

Code

Created by

🇺🇸United States pixelwhip

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.69.0 2024