fbpx
Download the User Profiles Worksheet A Dead-Simple Solution for Helping Clients Plan Their Priority Website Content
The Admin Bar

Simple Responsive Font Size Calculator

January 8, 2020

By: Kyle Van Deusen

Filed Under:

This page contains affiliate links in accordance with our affiliate policy.

How to Use Our Calculator 

It's actually very simple. All you need to do before using the Simple Responsive Font Size Calculator is determine the pt size of the body copy on your website. With that determined, enter it in the first field of the calculator below. As soon as you do you'll get all the optimal sizes for your H-tags 1 through 4 in each view. Plop those values into your theme's customizer setting and bingo-bango— you have perfectly scaled type.

Unsure what size to set your headlines and body copy? Even more confused when you have to figure out how that translates to tablet and mobile views?

You're not alone.

There are a lot of great font & type size calculators out there.  While the math and theory behind them is fascinating and absolutely will improve the hierarchy of your type— it's not solving my problem easily & quickly (I like easy and quick).

What I want is a simple way to tell me exactly what sizes my fonts should be— for desktop, tablet, and mobile views.

TypeCast has a great article called A More Modern Scale for Web Typography that takes all the mobile views into consideration, and I've been using as my baseline for well over a year.

Unfortunately, you still have to rely on doing your own calculations based off of your em size (or body copy size).

Using the TypeCast scale and article as a starting point, we created a simplified calculator that will quickly and easily give you all the optimal heading sizes for H1, H2, H3, and H4— for desktop, tablet, and mobile views. This makes setting up  your customizer a breeze— with font sizes that are proportionate and look great out of the box.

More to Consider

While these calculations are based on solid formulas, this isn't the bible, okay? Fonts come in all shapes, sizes, weights, and styles. You are likely to want to season this to taste. Keep in mind there are many ways to approach typography and sizing. REM is a great responsive system that scales fonts more appropriately for screen sizes and allows for better accessibility control— however, these things are still not easy to accomplish in many of the popular themes and page builders.

Kyle's Headshot
Kyle Van Deusen
@kylevandeusen

Kyle is the co-host of The Admin Bar, the owner of a agency of one called OGAL Web Design and the co-founder of Docket WP. You’ll likely find him trolling The Admin Bar community.

Enjoy this? Tip Me a Taco

Join The Admin Bar Community
Tab Phone 3pt6
Black Icon 225Docket Wp Ml
Save Time, Improve Efficiency, & Make Fewer Mistakes
Learn More
Projecthuddle Light V2
A WordPress plugin for website & design feedback.
Learn More
Nurture Copy Logo Compressed (2)
Nurture better relationships through done-for-you email marketing
Learn More
1013

More from The Bulletin Board

Marketing

How To Get Noticed On LinkedIn & Attract Your Ideal Clients

No longer just the place to try and find a new job, LinkedIn can help digital agency owners gain serious traction in their niche, attract the attention they deserve, and yes, even win new clients on it.
Nicole Osborne
May 7, 2021
Sales

Finding Leads (with Pete Everitt)

In a recent poll in the group, I asked the question "How often are you going out and proactively looking for...
Kyle Van Deusen
May 5, 2021
Processes

What’s the best day to launch a website, and why is it Tuesday?

According to the web development community, the best day to launch a website is Tuesday — and there's a good argument for it.
Kyle Van Deusen
April 20, 2021
Client Management

Are in-person meetings a new opportunity for your agency?

The pandemic brought even the most technologically challenged online. As we find a new normal, is your in-person availability an opportunity to stand out?
Kyle Van Deusen
April 19, 2021
Book Recommendation

Building a Profitable Business (without sacrificing ethics)

Before we get started, it's only fair (especially given the subject matter of this book) to mention that I was...
Kyle Van Deusen
April 15, 2021
Book Recommendation

Recommended Reading

The best reads for web designers, agency owners, and freelancers.
Kyle Van Deusen
April 9, 2021

Join Our Community

The Admin Bar Facebook group is at the heart of what we do. Join in on the daily conversation and get involved.
Join the Community
tab phone 4k member
© The Admin Bar (a Division of OGAL Web Design) — All Rights Reserved
crossmenu