Category: Typography

For many years there is a “war” going on about the legibility of the sans serif fonts over serif fonts and vice versa and the right use of them inside a web page or article.
Fonts

Through the years there were a lot of different opinions or suggestions indicating the superiority of the one type of fonts over the other in both legibility and an aesthetic level.

Introducing Serif and Sans Serif Fonts

An easy way to remember the difference between these two different types of fonts is that the Serif fonts have some ‘extra’ strokes at the edges of a character. Sans-Serif fonts don’t. Also, this extra detail in the characters is called “serif” while “sans” means “without” in French, so “sans-serif” means “without serif”. Here is an example of Times New Roman (Serif) and Arial (Sans-Serif):

serif – sans-serif

Definitions

The criteria on which this conflict was based upon were the ability to recognize an individual letter or an entire word (Legibility) or larger blocks of text, paragraphs (Readability).

The Argument

In Favor of Serif

People who supported Serif fonts over the years have claimed a number of things in favor of this type of fonts. More specifically they claimed that Serif fonts:

1. Guide the eye in order to better follow the horizontal flow of the text.
2. Are constructed in a way that helps legibility by adding more space and by increasing the contrast between the characters.
3. In reverse with Sans serif fonts do not cause fatigue to the reader.

Of course none of these claims ever proved to be true; on the contrary, studies have shown that all these claims are false:

1. There is no horizontal flow of the eye in reading,
2. There is no need for serifs in order to increase space between characters,
3. There is absolutely no need of contrast in order to better identify a single letter (on the other hand, a single character is better recognized when in a word)
4. There is no evidence nor a single relative scientific research what so ever, in order to prove that sans-serif fonts cause fatigue.

In Favor of Sans-Serif

On the other hand, people who are in favor of sans-serif fonts claim that Sans-Serif fonts are:

1. Better in smaller sizes
2. Better when used in a webpage
3. More legible due to the simplicity of the characters shape

Again all these claims are without a scientific proof.

Common Combinations Used in the Past

Serif Titles – Sans Serif Body or the other way around?

A common opinion about this issue until this day is the use of sans-serif fonts in the title of an article and the use of serif fonts in the body of the article or the other way around. It was said that using this technique could help readability. Many well-known websites use this technique nowadays too.

Again… this is only a speculation.

Conclusion

After all those decades of research, until this day, there is no scientific proof in order to favor one type of fonts over the other. There is not a specific pattern or a technique to follow. Actually there is no war at all! In my opinion it’s just a matter of taste and if you follow my advice…let it be this way.

There is no reason to try to prove which font type is better. Just use the ones that make you feel better!

Read more about historical fonts we are still using today here.

In web design there is always a time where we have to decide the dimensions of our web page but which are the correct dimensions? In which criteria do we choose these proportions?“Decision based in Instinct is memory in disguise”.

Proportions that recurring in books for centuries, are chosen based in mathematics and the arts! Pages created based on geometric figures and numbers such as φ (golden ratio) or π and the diatonic scale for music it is proven to actually be more pleasant to the eye or to someone’s mind.

Sizing, spacing and intervals used in the same way they used to music or in a painting to fill up the empty space, are based on a more general pattern used in nature. As shapes that can be found in nature seem to make more sense to our perception the same thing also apply when creating the layout of a web page. Emotions can be derived from and be driven by a page’s ‘geometry’.

The Golden Ratio example

The theory: Two quantities are in the golden ratio if, the ratio of the sum of the quantities to the larger quantity is equal to the ratio of the larger quantity to the smaller one.

It is also proven that the small quantity is always the 38.2% and the large one is the 61.8% of the whole (Just divide 10 with φ, 10/1,618 = 6,18). If for example we had a straight line with width of 10px, it applies:  10/6.18 = 6.18/3.82 = φ ≈ 1,618

The Golden Ratio is almost everywhere in nature. We can also find the Golden ratio in the Fibonacci series (a series of numbers where the sum of the preceding numbers gives us the next number).The division of two of these consecutive numbers tends to φ ≈ 1,618. Some of the widely used ratios for pages, such as 2:3, it actually gives us the φ number and is part of the Fibonacci sequence (0,1,1,2,3,5,8…).

Tschichold, by whom the laws of form of book page construction was popularized in the mid of 20th century, based his theory of the page proportions in the Golden Ratio  (using mainly 2:3 proportions).

Τext area proportioned near the golden ratio, 2:3

More widely used proportions are also:

•    1 : φ

•    1 : √2 (the ratio of A3, A4, A5 paper, etc.)

φ in web pages

In the same way that these rules apply in books, they also apply in web pages. You could create for example a pleasant web page divided in the already known sections (header,menu,main content,sidebar,footer) based in these analogies.

For example if you divide the width of your page with φ, you can use the result as the size of the main content area and the rest as the size of your sidebar which is the same as the analogy we saw previously, 61, 8% – 38, 2%.

You can also apply this rule to the width of other elements for finding their height (width/φ = height).

Who said mathematics aren’t useful..?

You can read more about harmony in typography here.