Typography of My Website
I’m typophil. But this is nothing for a self-help group because it simply means love or affection to typography. It was clear to me from the start that I would start with typography for my new website.
Normally, only designers pay attention to typography, the rest of the people is usually relatively unimportant. But typography influences each of us, consciously and subconsciously.
Simple things like readability or contrast decide whether the message of a text reaches the reader at all. And since words have incredible power, typography is often underestimated.
The right choice of font, font size, weight, layout, sentence width, lead, letter-spacing, or many other things unconsciously affect the reader and thus transport the statement. Proper typography can support and reinforce a message that makes the wrong message even meaningless or ridiculous.
I’ve always found typography fascinating, but only after reading the book The Elements of Typographic Style by Robert Bringhurst I studied the matter more deeply. There is a Web-adapted version of his book on the website The Elements of Typographic Style Applied to the Web.
Good typography does not just mean selecting a scripture but is an art form that I am still far from mastering.
It is important to choose the right page layout, the right sentence width, the correct lead, the right combination of fonts, the right scale, the correct font size, and a variety of other guidelines.
Several years ago I stumbled on two interesting lectures by Tim Brown on typography. Tim Brown works as Type Manager for Adobe Typekit, a platform that offers Webfont hosting. In his lectures, he offers a very interesting insight into the history of typography and how to achieve good typography.
I decided to start with the selection of a scale. A typographic scale is the selection of harmonic proportions, which are then applied to font size, sentence width, and other parts.
The most famous proportion is Golden Ratio, which has a ratio of
1:1.618. But there are many other proportions that have their origins in geometry, music, nature, or history. Tim Brown has even created the website Modular Scale, on which such a scale can be calculated.
But this was not necessary for my project, because Team-Sass offers a SASS extension.
So I add the gem to my Gemfile first:
group :development do
Then I load the Compass plugin in
# Require any additional compass plugins here.
Afterward only the module of Compass has to be loaded in a partial:
I've decided to use the golden ratio and then select the ideal text size and an important number:
$ms-base: 16px 18px;
Now the helpers of Gems can be used everywhere in the SCSS. So instead of writing somewhere manually
2.618em, I just write
modular-scale(4) to choose the fourth value of the scale:
Of course, I could have started to choose the sentence width (line length), and then choose the grid appropriately. However, now that a scale has been selected, you can use it for the correct sentence width.
Of course, a responsive website with fluid line length is not an optimal prerequisite for a fixed sentence width. There are all sorts of values circulating on the Internet, which is an optimal line length. All sorts of truisms such as no less than 45 characters, no more than 85 characters, or similar values can be found there. But nothing is scientifically proven, and one should measure in words rather than in characters because we see word images and not letters.
If the line is too long, the eyes are tired and the readers may lose the connection to the next line, if the line is too short, the constant interruption of the reading flow will be equally severe. There is only one thing to say: The correct line length does not exist, it depends on the font, typesetting, and line spacing.
So I tried to determine the optimal line length of my website with about 66 characters or about 10 words. Depending on the browser size, the line length then shrinks, but only up to a threshold that I have selected. If this falls below, I select a different number of columns of the grid.
But I make sure that the line length is not wider than I determined to be optimal because as soon as the head has to be moved, the line is clearly too long.
Next, I set the line spacing and decided in addition to the technique of vertical rhythm. In the case of fonts of different sizes, the line spacing is mathematically changed in such a way that two different sized fonts would still be visually adjacent to each other.
Very handy is that the relatively annoying mathematics behind the formula (which spits out mostly crooked values with many decimal places) does not have to be calculated by yourself. Compass already comes with a module for it.
There are some variables to be set:
$base-font-size: modular-scale(1); // 18px
$base-line-height: $base-font-size * $base-line-height-count; // 27px
$relative-font-sizing: true; // use em and not px
$round-to-nearest-half-line: true; // prevent too big gaps between lines
A simple call to this mixin activates the vertical rhythm:
To adjust a font size you do not use absolute values anymore, but a mixin. This can of course also be used in combination with the Mixin of Modular Scale:
@include trailer(1, modular-scale(6), margin);
You also no longer directly define the distances above or below an element, but use mixins, as in the example
I had the most problems choosing the font, as this is a difficult task. There are tons of fonts, but finding the right one for the occasion is a big hassle. To make matters worse, there are far more bad fonts on the Internet than good fonts.
Creating a font is an immense effort and therefore a license for a font step also costs a lot of money. But to use web typography, the designer of a font must, of course, release it for embedding in a web site. Beautiful, free fonts are available for example on The League of Movable Type.
In addition to owning the font, there is still the possibility to integrate the font of a web service. There are for example pay-as-you-go solutions such as Adobe Typekit, which offer many professional fonts. Anyone who is unwilling to regularly pay to use a font can still choose from a large number of fonts that have been freely made available by nice designers.
I first looked at Typekit, but then chose two free fonts that I integrate into my website via Google Fonts:
- Gentium Basic for long-running texts
- Yanone Kaffeesatz for headlines and shorter texts, as on the homepage
Gentian Basic is a very appealing typeface with serifs and an italic typeface, while Yanone Kaffeesatz is a sans serif typeface. Both fonts in combination offer a harmonious picture.
On November 17, 2006, Oliver Reichenstein wrote on the Blog of Information Architects about the 100% Easy-2-Read Standard, this concept was completely new to me. At that time, the font on websites was consistently set too small. The browser standard has always been
16px. But most pages use values between 10 and 12 pixels.
After this blog post, designers started to increase the base font size. I even use
18px for my floating text font.
I load Gentium Basic in 400 and 700 and Yanone Kaffeesatz in 200 and 400. So I can put bold parts of the body text in 700 and the rest in 400. On the homepage, I only use Yanone Kaffeesatz and use for high-resolution displays (Retina) one Font size of 200, for all other displays 400.
Tracking, Widows and Orphans
Other Typographic Formatting
I use some more typographic formatting, such as centered verse blocks, correct quotation marks for inline citations depending on the language, and I’ve written myself a Jekyll plugin that ensures that things like
1000 € or
5 + 3 are provided with invisible spaces so that everything slips as a block in a new line and not character by character.
Interesting Links About Typography
For those who have become curious about typography, I have put together a small list of recommended links to this topic:
- The Elements of Typographic Style Applied to the Web
- Thinking with Type
- Butterick’s Practical Typography
- Type Basics
- Web Design is 95% Typography
- Five simple steps to better typography
- Nice Web Type
- More MeaningFull Typography
- A List Apart: Typographie
- Modular Scale
- Helvetica – A Documentary Film by Gary Hustwit