There are a handful of timeless typography principles. For instance, scale, proportion, rhythm and harmony are applicable to any design that relies on textual content to convey a message, whether it’s an iOS app or a printed newspaper.

A groundbreaking book, first published in 1992, outlined key typographic concepts that designers still apply today. This book is called The Elements of Typographic Style.

Several respected typographers recommend The Elements of Typographic Style. German typeface designer Hermann Zapf (who designed the Palatino and Optima fonts) once said "I wish to see this book become the Typographers’ Bible."

How do you apply the elements of typographic style in the Web context? A free online book titled The Elements of Typographic Style Applied to the Web will show you how.

The Elements of Typographic Style Applied to the Web home page

The online book teaches its readers implementation techniques for the concepts discussed in the original book. For example, The Elements of Typographic Style espouses the concept of typographic scale. On the Web, this can be achieved by using relative font units such as em or rem. Here’s the CSS from the online book for achieving typographic scale:

body { font-size: 100%; }
h1 { font-size: 2.25em; /* 16x2.25=36 */ }
h2 { font-size: 1.5em;  /* 16x1.5=24 */ }
h3 { font-size: 1.125em; /* 16x1.125=18 */ }
h4 { font-size: 0.875em; /* 16x0.875=14 */ }
p { font-size: 0.75em; /* 16x0.75=12 */ }


Check out the book’s table of contents to see all the topics covered within it.

You might find these related posts useful as well: