• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Feast Design Co.

WordPress Themes for Food & Lifestyle Bloggers

  • Themes
  • Feast Plugin
  • Blog
  • Support
  • Tutorials
  • Nav Social Menu

    • Email
    • Facebook
    • Instagram
    • Twitter
menu icon
go to homepage
  • Feast Plugin
  • Support
  • Tutorials
  • Account
    • Facebook
    • Instagram
    • Twitter
  • search icon
    Homepage link
    • Feast Plugin
    • Support
    • Tutorials
    • Account
    • Facebook
    • Instagram
    • Twitter
  • ×

    Home » How To Customize Your WordPress Themes

    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.

    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 50x50 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.

    • https://blog.prototypr.io/how-to-set-perfect-line-lengths-for-the-web-528f08f8b344
    • https://baymard.com/blog/line-length-readability

    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.

    Increasing the font size

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

    Some fonts vary in how the text is displayed: 16px in one font may display closer to 14px in another font, or 18px in another font.

    You can manually adjust the font size by overriding it using the Additional CSS screen:

    body { font-size: 18px; }

    Note that the headers will all increase proportionally as well, as they're specified as multiples of the body font size.

    Additional reading

    • https://gankra.github.io/blah/text-hates-you/

    Primary Sidebar

    Themes

    • Feast Plugin grants access to all 5 themes
    • Not sure where to start? See the getting started guide

    Feast Plugin

    • Feast Plugin
    • Modern Homepage
    • Modern Sidebar
    • Modern Footer
    • Modern Mobile Menu
    • Modern Menu
    • Modern Recipe Index
    • Modern Categories
    • Modern 404
    • Recipe Update Checklist
    • Recipe Post Template

    Resources

    • Image optimization
    • Recipe Guidelines for Foodie Bloggers
    • How to write a recipe post
    • Page headings
    • SEO for Food Bloggers
    • Tutorials
    • Pagespeed Audit
    • Comments
    • Internal links

    more resources →

    Categories

    • Modern Recipe Index
    • Modern Categories
    • Posts per Page
    • How to use categories
    • Category pages need content
    • How to configure the category pages
    • Food blog site structure
    • Food blog page structure

    Classic themes

    The classic themes are only for hobby sites and any food blog interested in monetizing or SEO needs the Feast Plugin.

    • Foodie Pro Classic
    • Brunch Pro Classic
    • Cook'd Pro Classic
    • Cravings Pro Classic
    • Seasoned Pro Classic

    Footer

    ↑ back to top

    Topics

    • Food Blog Design and Appearance
    • Productivity
    • Tech and Plugins
    • Food Blogging and Promotion
    • Minimalist WordPress Themes
    • Simple WordPress Themes
    • Travel blogs
    • Knitting + DIY blogs

    Help

    • Documentation & Tutorials
    • Food Blogging Resources
    • Open A Support Ticket
    • Login
    • Your Account
    • Subscriptions
    • Downloads
    • Discounts and Coupons
    • Compatibility

    Company

    • Subscribe to newsletter
    • Privacy Policy
    • Refund policy
    • Terms & Conditions
    • Principles and Best Practices
    • Affiliates
    • Contact

    Copyright © 2023 · Feast Design Co.

    Results not typical or guaranteed. Our themes and plugins are just a small part of the overall effort involved in running a food blog. Nothing on this website shall constitute legal or financial advice, always consult a local lawyer and accountant. Accessing this website and all transactions herein are under the laws and jurisdiction of Toronto, Ontario, Canada.