Blogger Helper: Design Basics: Typography

I’m starting a series of Blogger Helper posts surrounding design. Design Basics will highlight those things that every blogger should know. If there is anything you would like me to cover in this series please comment or email me!

Typography:

Readability is the number one concern every single blogger should have. If I can’t read your blog, how can I possibly follow it? I’ve been seeing a ton of blogs with script text and sometimes they even take it further and make it neon.

Script font at 16px

Can you answer the question I propose above? No? Can’t decipher it? Now imagine that is the entire blog. How fast will you be clicking away?

Sans Serif:

“Sans Serif-In typography, a sans-serif, sans serif, san serif or simply sans typeface is one that does not have the small projecting features called "serifs" at the end of strokes"- Wikipedia

Sans Serif is the web standard for easy readability. Sans Serif is easily readable because it doesn’t have feet and therefore it doesn’t merge together and spacing seems to be further apart.

A Sans Serif Font-Veranda

But the issue with Sans Serif is that many of them can be a bit boring. And as around 90% of all design on blogs is typography that is a real issue at least for me. Luckily you can find Sans Serif in many forms. The font I use is a Sans Serif, but it has just a hit of Serif that I find it has personality.

Serif:

“Serif- In typography, serifs are semi-structural details on the ends of some of the strokes that make up letters and symbols. A typeface with serifs is called a serif typeface (or serifed typeface).”- Wikipedia

My personal favorite and is the most used type of font in print. This font is used widely with such fonts as Times New Roman and Courier New which any writer or student is well versed in. This can make serif fonts feel aged and overused, but I often find serif fonts have the most personality without really endangering readability. In web design serif fonts are still accepted just make sure it’s one that doesn’t have feet that overlap or otherwise detract from readability.

In a purely personal opinion don’t use those fonts that are standard print fonts for your main font unless you want your blog to have an academic feel.

Decorative Fonts:

There a ton of decorative fonts out there. These are fonts that are script, unusual, or otherwise hugely different than serif or sans serif. These should ONLY be used in small amounts if at all and they should ONLY be used for headings or for decoration. Too many decorative fonts makes your blog unreadable and generally is not pleasant to look at.

Size and Color:

Web standard says that fonts should be 16 px and contrast highly with background (black on light backgrounds and white on black backgrounds).

16 px is web standard because of the difference in reading distance from the standard 12 px in paper. The 4 px is believed to make up the difference.Remember all fonts are of different heights and weights and just use discretion to decide what size you think works the best.

Coloring is important. Please don’t use neon fonts. It is unreadable even on a black background and seems juvenile. Quite honestly in my opinion don’t even use white on black. Have your text background be white and your font black or a color very similar to black.

Resources:

• Read more about Typography at Smashing Magazine.
• Play with fonts without changing html with Chrome extension Google Font Previewer
• You can enable any Google Web Font with simple html

Rie

I'm a wife, student, and a dog-lover who reads when I should be folding laundry (bane of my existance), I write (rarely as academic papers consume my life), and love getting wrapped up in fiction.

Categories: Blog Helper