Flexible CSS typographic scale

3 min read

Deviation Actions

thehappybit's avatar
Originally posted on thehappybit.com

When designing using text, no matter if it's for print or the Web, one vital thing to do is to ensure that the design stays harmonious in every aspect.

The best way to do so is quite possibly using a so called typographic scale, which means giving text portions precise, regular and linear dimensions, based on the hierarchical relationships they hold with other text elements.

This has been long known, of course, and we're not bringing anything new to the cause.

But being the Web one of our domains, we felt like managing the typographic scale in CSS could be done better, and in an easier, sort of automatic, way.

Our goal was to create a base-level CSS that could set a well thought series of values for the typographic scale, hence establishing a vertical rhythm, with absolutely no reference to pixels. Instead, we wanted it to graciously adapt itself when varying the font size declaration of the document's body.

Using ems and percentage we were able to create such base stylesheet, defining the headings (from h6 through h1) and paragraphs main proportions, relying on the body's font-size value, with a pre-defined line-height set at 1.5em.

Proportions are then extracted keeping the value of 14 pixels as the smallest value (paragraph); the biggest value, on the contrary, is 48 pixels, used for the primary level heading.

The scale would degrade as follows, from the biggest element to the smallest:

48, 32, 24, 21, 18, 16, 14

Should we want to get the code for our H1s to be properly styled according to our chosen rhythm, we could write:

paragraph = 14px
line-height = 21px (14px * 1.5)
h1 = 48px
line-height * 3 = 63px

font-size : 48 / 14 = 3,428571429em
line-height : 63 / 48 = 1,3125em

Basic text sizing
Set your main font size for paragraph

62.5%  => 10px
68.8%  => 11px
75%    => 12px
81.3%  => 13px
87.5%  => 14px
100%   => 16px
112.5% => 18px
125%   => 20px
Proportions based on typographic scale
14, 16, 18, 21, 24, 32, 48

body {
font-size: 87.5%;
line-height: 1.5;

h1 {
  font-size: 3.4285714285714284em;
  line-height: 1.3125em;

h2 {
  font-size: 2.2857142857142856em;
  line-height: 1.96875em;

h3 {
  font-size: 1.7142857142857142em;
  line-height: 1.75em;

h4 {
  font-size: 1.5em;
  line-height: 2em;

h5 {
  font-size: 1.2857142857142858em;
  line-height: 2.3333333333333335em;

h6 {
  font-size: 1.1428571428571428em;
  line-height: 2.625em;

p {
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
    margin-bottom: 1.5em;

Again, the resulting values for line heights are a direct consequence of having set the base line-height at 1.5. In our next article we'll see how's possible to combine LESS and our typographic scale to get an even more flexible base stylesheet for typography.

Articles on the subject:
The typographic scale by retinart.com
Five simple steps to better typography by Mark Boulton

Suggested lectures:
Elements of Typographic Style – Robert Bringhurst
© 2012 - 2021 thehappybit
Join the community to add your comment. Already a deviant? Log In