Setting Type

Older Article →

As you can see, the design of this blog has changed. You can check the difference in this screenshot.

In my last post I mentioned that I want to start with the typography. To be able to fully concentrate on the typography I got rid of every other element on this blog and chose a really simple one column layout. Before deciding on color or layout I wanted to have typography which encourages the user to read my articles. Below I’ll tell you about the main steps I went through to get there and what they are good for:

Typographic Hierarchy

At first I tried to find proper visual hierarchy for the different typographic elements I’m using in my posts. By setting adequate visual hierarchy one can structure a document and set indicators which point to important elements. Because I didn’t want to use color yet I started with font-size. For the size of the different typographic elements on this blog I used the scale mentioned in this article.

So here are those elements with their different font-sizes:

Measure & Leading

Next I wanted to have proper measure and leading. This article provided the following details:

“There is an optimum width for a Meas­ure and that is defined by the amount of char­ac­ters are in the line. A gen­eral good rule of thumb is 2–3 alpha­bets in length, or 52–78 char­ac­ters (includ­ing spaces).”

— Mark Boulton

Therefore my lines are about 70 characters in length, which, in my opionion, makes the text fairly good to read.

To get optimal legibility I also had to increase the leading of the text. Leading is the amount of added vertical spacing between lines of text. A rule of thumb is to set the leading to 50% of the font-size. My body copy is 16px — this would bring about 8px leading. 16px + 2×8px makes a line-height of 24px. That’s why I set the CSS line-height property to 24px.

Setting Type to a Baseline Grid

If you set type to a baseline grid it’s beautifully balanced, and therefore more aesthetical and legible. To learn everything about setting type to a baseline grid I would recommend the following articles:

To check if my type is set to a baseline grid you could use the Syncotype tool. Here’s a demo in which the line-height is set to 18 pixels —to check the baseline grid on my blog you would have to set the line-height to 24 pixels.

Boldface, Italics and Small caps

Last but not least I had to find proper styling for special elements coming up in the body copy. Those elements could be foreign words, new terms arriving, keywords or technical terms. To highlight those elements I used the recommendations from this article, and this led to the following styles:

Conclusively…

With all the great ressources on the internet (those I found useful you can find on my delicious site), a little research and some time to tinker on your typography you can get great results which make your articles look good and easier to read. I think all those little adjustments made a fine distinction wherefore it was worth to invest some time.

At the moment I’m not quite sure on which aspect of my blog design I’ll work next (mybe color) — so stay tuned.

Older Article →

Comments