Font Size for Food Blogs

We recommend using the Feast Plugin to edit the body font size, as this customization keeps through theme updates and changes.

In all themes versions 4.0.0+ we’ve updated the body text size, as well as header sizes as follows:

16px – body { font-size: 100%; } (most browsers and devices use 16px as the default)
32px – h1 { font-size: 2em; }
26px – h2 { font-size: 1.625em; }
22px – h3 { font-size: 1.375em; }
18px – h4 { font-size: 1.125em; }
20px – blockquote { font-size: 1.25em; }

For a full outline on how and why these sizes were selected, please see this typecast article on font sizes for the web.

This change brings the default setup for all themes more in-line with modern web standards.

The more astute readers will notice that the header sizing is optimized for mobile devices, which makes up approximately 80% of most food blogs.

Note that the headers are defined using “em” units, which takes the parent container’s font-size (in this case: 16px) and multiples it by the “em” number.

Mục Lục

Primary Content vs. Supplement Content

In the days of yore (you know, 2018 and before), it was common to have your primary content (your post) designed to stand out from your supplemental content (headers, navigation, sidebar, footer). This was a good move – it kept the visitor focused on the content that they arrived on your site to read.

For more details about primary vs. supplemental content, see our post about recipe page guidelines for food bloggers.

We’re officially in a mobile-first world with Google indexing pages for mobile devices, before desktop. This makes sense, because most food blogs see about 80% of their traffic from mobile devices. In a mobile-first design, there isn’t really primary and secondary content – it’s all 100% screen width, continuously flowing down the page, with the line between your post content becoming blurrier, and less relevant.

Clickable elements too close together is a big concern for Google, and mobile usability in general. This means that you shouldn’t go too small with your clickable text. Navigation elements like “Read More”, “Previous”, “Next” and “Search” have a minimum required size of 50×50 px according to modern web standards.

This requires a mindset shift for food bloggers, who still work on their website primarily using desktop and laptop devices, which has a much different display. The truth is, in 2019 and beyond, your desktop version really isn’t that important anymore.

Future Room for Improvement

This isn’t perfect, and each blog can test and vary it’s own sizes based on user feedback or their specific use-cases, but we recommend anyone who doesn’t know what they’re doing leave the defaults as is.

The other side of this equation is the number of characters or words per line. Who cares, right? People have actually studied this, and the ideal number of characters per line is 45 – 75.

We may dive into this a little deeper in the future, but the tweaking at this level borders on obsessive-compulsive and is not worth investigating until we have a good way to monitor its impact via A/B testing.

You as a food blogger should stay focused on creating mouth-watering recipes, cooking, taking photos and writing your unique content. That’s what earns you income, and that’s where you should be spending your time.