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

	Reference
	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 BringhurstB7HRJA3SPNZ9