Typography and Blogs: Uppercase / Lowercase


The first rule of thumb in graphic design (of which web design is a part of, of course) is that body texts are typeset in lowercase. There are of course exceptions where uppercase is also used, especially for paragraph entry texts, but the general rule holds. 

But can every font be used successfully for body text typesetting? The short answer is no. Body text needs to be readable, which means that you have to have very good sentence baselines that the eye can slide over very easily, which is what I am explaining in the tutorial video below that I made for my design students:


So, what are my recommendations? Roboto would be number one. And then any font that you find on google fonts that says "semi condensed" would be good. However, make sure that the font has lighter weights. A body text weight should not go above 500, anything heavier will hinder legibility even though you may think that this is a contradiction, it is nevertheless so: Heavier fonts are harder to read when it comes to lengthy texts. Serif fonts are also good as body fonts, however here no need to pay attention to picking a low contrasted family. So, as an example, the highly popular Playfair Display family is out when it comes to body texts. The font has way too much contrast, as the tag "display" already implies. There are however excellent serif fonts for body text: 'Source Serif 4' is one that I would highly recommend and then also 'Droid Serif' - which for me is actually probably the most legible serif font that is out there. You will not be able to find 'Droid Serif' on google fonts, but it is still a font that Blogger accepts, so you can go ahead and add it to the googleapis list from the previous post.

When it comes to uppercase these are a designer's blessing since they have two strong foundations that they lean against: A baseline but then also a topline. And this makes them very easy to work with when it comes to small pieces of standalone texts. So, with titles, uppercase fonts can be used very successfully, especially in web design and especially in the case of blogs since titles are also standalone elements that appear by themselves above post thumbnails on the homepage. And standalone text elements will benefit from being uppercase since usually they are not long enough to form good baselines and therefore also need the topline. Tags and labels should always be uppercase for the same reason - these are really only single words and when they are written in lowercase they truly lose effectiveness as typographic items.

Now, let me finally say a few things about two fonts that are very popular but that in my experience can only be used in uppercase: Montserrat and Josefin Sans. Both are absolutely lovely in uppercase (and I have used them myself in a lot of the template redesigns that I have been making), but very problematic in lowercase since these are both slightly extendend fonts in which the lowercase really suffers from the spacings between the letter. This rule applies to most other extended fonts - they will look really nice in uppercase but not work very well in lowercase.

Powered by Blogger.