Best fonts for websites and blogs

Many to choose from on Blogger, WP

When you created your website or blog, did it come to you that fonts are an important factor for look & feel and readability of the site? Perhaps not. Even professional web designers do not think beyond serif vs non-serif font issue - except a few.

This post is mostly for you to appreciate the importance of fonts and have general knowledge about these. For web design professionals, this could perhaps act as a reminder.

First, some theory behind using fonts on websites

We take fonts for granted, but they have a personality. With that they either enhance or reduce the overall look and feel of a webpage. The difference might look insignificant but the right font gives a psychic edge to the page; some fonts invite readers, some are indifferent, some repel. This also depends on who the readers are.

Fonts are described in different ways. For example, fonts with flare or little hooks (=serif) at the end of strokes are called serif fonts (e.g. Times Roman) while those without serif are non-serif fonts (e.g. Verdana, the font used here). 

Fonts may be condensed (=tight) or loose and may be much taller than wide. In monospace fonts, all alphabets take the same space (e.g. in Courier, 'm' takes the same space as 'i'). In geometric fonts, the elements of each font are in common geometric shapes (e.g. fully round belly of 'd').

Standard line height and letter spacing also are different in different fonts. Some fonts are intrinsically bold or big or flowing as compared to others. Some fonts have legibility issue especially when set in small sizes; their 'a' might look like 'o' and 'I' like 'l'. All fonts do not respond fine to different screen sizes. Some fonts, when scaled down on mobile phone screens, look jumbled up.

Fonts are grouped into font families. For example, This is one serif font family: Times Roman, Georgia, Rockwell. The fonts of a  family have some common features.

You can manipulate some features of almost every font with a simple code or editing tool. For example, you can make the text bold or italic, put a line across it or underline it, color it in many hues, change line space... 

Among the fonts in circulation, the following are reported to be most popular on websites: Lucida Sans, Tahoma, Georgia, Verdana, Arial, Microsoft Sans Serif, Trebuchet, Times Roman, Comic Sans and Courier New. Many of these fonts are free and many more can be procured on payment. 

When you open a webpage on your computer/ device, the browser tries to display the font in which the text is given in the webpage. When it does not find a particular font, it looks for a font of that family if it has been defined in the code of that page. If that too is not available, it looks for a font on the computer that would fit the bill. It is here that you might have unwanted rendering of text if you use a rare font.

What should you keep in mind about fonts on your website/ blog?

The first consideration in choosing the main font is that it must aid readability. Of course there are other factors that aid or hurt readability, but selection of font is perhaps the most important. In general, sans serif fonts read better as they do not have the flare and are fairly uniform in thickness of strokes. For text in posts =body text), is better to go for a common non-serif font such as Verdana. If you like a serif font, go for Georgia but not Times Roman. For body text, do not go for fancy font; but if you want a change, go for Comic Sans MS and not beyond that.

Trebuchet and Helvetica are other good-looking and readable fonts for general blogs. 

Very thin fonts in geometrical type might sometimes look good but do not read well. Condensed fonts or those with less spacing are also not great to read as the alphabets seem to stick to each other. At the same time, more than optimum space between alphabets makes the text uneasy to read.

The font for headings and titles should be either bolder or bigger than the body text. You can choose a thicker font for these. Underlining, capitalizing, italicizing and coloring differently are some of the ways special expressions can be highlighted against the main text. For most bloggers, this should be enough for making all the required variations in text display. 

Font size is an important factor for legibility of the script as well as readability of long passages. We reckon that in most cases, 14 pixel size fits the bill for body text. 
 
If you are a blogger on a free platform such as WordPress or Blogger, these platforms have a number of fonts available for title, description, links, post headings, sub-headings and post text. On Blogger, you can choose a font through Template> Customize> Advanced and instantly see how the font renders on your blog. 

The font's personality must match your blog's or website's. For example, you should use a formal font if the blog is on a formal subject and use an informal font type (e.g. handwriting or lucid fonts) for a fun/ kid blog. Even on such blogs, limit the use of too embellished or quirky fonts to headlines, some fun words etc and not on the main copy.

Don't use fancy fonts for the reasons given above. These might look good on your computer but might look totally different on others' screens.

Don't generally use too many fonts in the blog and within a single post. Yes, it is good to change font for contrasting a small piece of information (e.g. link anchor). Unless avoidable, don't change font within a sentence, and too often.

Experimenting with fonts on your blog: are you prepared?

Well, if you are bored - as some are -  with the standard webfonts on your website or blog, there are paid as well as free options. We'd not recommend any paid options here as part of our general policy.  It is perhaps not necessary for most blogs to spend dollars on buying fonts when a good numbers are available free.

Google throws up thousands of fonts in one click!

Avoid downloading and using free fonts available as '100 Free Fonts' as these might have some hidden cost that you bear by way of malicious code or something similar.

Google has an enormous collection of web fonts, spanning over 500 font families. These are not only websafe, these are easy to implement. If you go to Google Fonts, you'd find these fonts. For choosing the font of your liking (not only English/ Roman/ Latin but many other scripts), it has filters for thickness, width, serif etc. 

Once you choose a font for body text or titles or widgets on Google Fonts, there are instructions on that site on how to implement these. Again, this implementation needs a bit of comfort with tech, and so very novice or tech-fobic bloggers should implement these fonts with due care. 

One area you can experiment with fancy fonts quite a bit either directly or by embedding them in a background image is the blog title. Depending upon the subject of the blog and its readers, you can use fonts with brush strokes, fancy ligature/ flares, slants and so on. You can even copy the target text, edit it on an image editor and then embed in an image or plain background to create stunning title banners.

You may like to visit this post for other text-related aspects: Text display in blogs and websites matters a lot.