Nick lazily jumps over the full stack

The Best Font Sizes For A Blog

When I was imagining my future blog, I knew only the fact that a good font size should be at least 16px. Then I found that the beauty secret was in the headings. However, it was completely unclear what their sizes should be.

It turned out, people in the internet and Google knew everything. Type scales, they said. The idea is to get a set of various font sizes selected according to a certain principle. There is a bunch of ways to build this scale: from the golden ratio to the musical scales.

I suspect that you can select whatever sizes you want, as long as it looks good. But you still need a way to find good sizes, so I used a great tool at type-scale.com, just to not re-invent the wheel. I chose large scale and the result was great: readable text, big headings, everything looked like a top-notch journal-portfolio-design-super-duper page. Until I opened the website on my mobile.

This opens the second and the last part of this mini-course. It says: use different scales for the different screen sizes. Type-scale.com had this information but who reads instructions... So, this is what I'm using now:

  • Large scale for the big screens. This type of scale has bigger headings that look awesome.
  • Small scale for the phones. Headings are much smaller and close to the main text, so everything fits on small screens.
  • Medium scale for the medium screens like tablets. The heading sizes are less smaller than in the large scale but look okay.

* * *

Ok, now for the really cool stuff. As always, I wrote all this to be able to post a beautiful image. Notes:

  • I used the Scene creator by Aleksey Belorukov. His mockups are fantastic, this is my main source of inspiration.
  • I used great Ludicrous font by Missy Meyer to simulate handwriting.
  • Coming up with texts on the image was as much fun as moving items on the scene!
  • You can omit an article (definite or indefinite) in a newspaper title.
  • Gradient color background may look better after applying Noise filter to it in Photoshop.
  • Photoshop masks are great for adding reflected lights. Perhaps, I have not done it well, but the pen stand has reflected background color on the edges.

By the way, the notebook on the image has an example of a large and small type scale. Use this button to hide everything and enjoy the background:

Button: