Typographic Scales and Twitter Bootstrap 4


A big old h/t to Michael Tribone today for introducing me to music scales as applied to a typographic scales, e.g., "second major." I had heard of folks using the Golden Ratio before, but didn't realize the extent to which type setters were using musical scales as references (and for how long they have been doing this!). These scales/ratios are called "modular scales" by the way.

Here's a bit more background (source):

A modular scale is a scale with a single base that follows a single ratio. Robert Bringhurst’s modular scale may be the most well-known example of a typographic scale. It was used by European typographers who were working with lead type and referred to the sizes in terms like “pearl” (5pt), “minion” (7pt), “pica” (12pt), and “english” (14pt). He refers to this as the equivalent of a Diatonic Scale in music. Many other typographers since have derived their modular scales from musical ratios such as “Minor Second”(1.067), “Major Third” (1.25), and “Perfect Fifth” (1.5).

Taking this to Twitter Bootstrap 4 you could implement scales like this:

$major_third: 1.25;
$major_second: 1.125;
$ratio: $major_second;
$h6-font-size: $font-size-base !default;
$h5-font-size: $h6-font-size * $ratio !default;
$h4-font-size: $h5-font-size * $ratio !default;
$h3-font-size: $h4-font-size * $ratio !default;
$h2-font-size: $h3-font-size * $ratio !default;
$h1-font-size: $h2-font-size * $ratio !default;

And when you're using webpacker locally you can quickly see your browser refresh with the different font sizing in place.

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.