Back to

Interactive Guide to Blog Typography

Have a blog? With small adjustments, you can noticeably improve its typography. Your readers will thank you for it.

This guide will help you understand the typographic foundations that will improve the readability of your articles.

Made by Tommi Kaikkonen. Check out my blog.


  1. Layout
  2. Measure
  3. Line Height
  4. Visual Hierarchy
  5. Title
  6. Paragraph
  7. Fonts
  8. Hinting
  9. Font Size
  10. Color
  11. Small Caps
  12. The End

Click the button to begin.

Sample Text: The Best Color Scheme for Your Website

The majority of websites are composed of a bright, usually white background and dark text. Then there's the small minority of the web: dark websites, colorful websites. Why is the bright background used by the majority of websites?

Utilitarian Motivation

The common use for small caps is for abbreviations longer than 2 letters, such as CSS, HTML and WYSIWYG excluding AM, PM, BC and similar.

Research shows that consumers with a utilitarian motivation find a low-arousal environment more pleasurable than a high arousal one. The degree of arousal refers to how exciting the environment is to our senses. In simpler English, users motivated by usefulness want a non-exciting environment.

Hedonistic Motivation

Hedonism is defined as the pursue of pleasure, especially the pleasure of our senses. Research shows that consumers with hedonistic motivations find a high-arousal environment more pleasurable than a low-arousal one. In simple English, users motivated by pleasure prefer an exciting environment.

Example outside the web: nightclubs. Colorful lights flash, music pounds and beverages satisfy your taste buds. It is truly a high-