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
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
s 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
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 BoultonSuggested lectures
:Elements of Typographic Style Robert Bringhurst