Special Announcements!

Take a peek at what’s happening new around The Admin Bar!

Black Friday Deals!

Our 2024 Black Friday deals page is live! Check out deals from across the WordPress space or get your deal listed.

45% Off Our Most Popular Products

Use the code BF2024 and save 45% on The WOM, Easy-Peasy Proposal, Website Estimator, or Agency Copilot!

Vote in The WP Awards!

It's time to defend our title as the #1 WordPress community! Cast your vote (categories #23, #24, and #25) today!

Simple Responsive Font Size Calculator

Using this calculator is 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. …

Kyle Van Deusen

Published:

Filed Under:

Tools

Kyle Van Deusen

Kyle Van Deusen

The Admin Bar

After spending 15 years as a graphic designer and earning a business degree, I launched my agency, OGAL Web Design, in 2017. A year later, after finding the amazing community around WordPress, I co-found The Admin Bar, which has grown to become the #1 community for WordPress professionals. I'm a husband and proud father of three, and a resident of the Commonwealth of Virginia.

type size calculator featured image
This content contains affiliate links. View our affiliate disclaimer.

Using this calculator is 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.

Share This Article!
Kyle Van Deusen

Kyle Van Deusen

The Admin Bar

After spending 15 years as a graphic designer and earning a business degree, I launched my agency, OGAL Web Design, in 2017. A year later, after finding the amazing community around WordPress, I co-found The Admin Bar, which has grown to become the #1 community for WordPress professionals. I'm a husband and proud father of three, and a resident of the Commonwealth of Virginia.

Come Join Us!

Join the #1 WordPress Community and dive into conversations covering every aspect of running an agency!

Kyle Van Deusen

Community Manager

The Friday Chaser

Wash down the week with the best of The Admin Bar! News, tips, and the best conversations delivered straight to your inbox every Friday!

Latest Events

August 30th, 2024

Vitality – Part 4: Cumulative Layout Shift (CLS)

Join us for a deep dive into Cumulative Layout Shift (CLS) and learn practical strategies to improve your website's visual stability and user experience.

August 2nd, 2024

Vitality – Part 3: First Contentful Paint (FCP)

As we continue to decode the Core Web Vitals, our focus shifts to a metric essential for capturing user attention — First Contentful Paint (FCP)

More Articles

Open Notebook With Pen And Eyeglasses On Blank Pag 2023 11 27 05 19 55 Utc

Back to School: How to Use Your Expertise to Sell Online Courses

Want to diversify your income? Discover why you should use your expertise to create valuable online courses and how to create and sell courses in no time!

Pexels Timmossholder 5737622

From Freelancer to Agency Owner: Is It Time to Hire Employees and Build a Team?

Feel like it might be time to hire your first employee but not sure if you’re ready? Learn about when and how to build a team around you in this blog.

Vitality Lcp 2

How to Fix Interaction to Next Paint (INP) and Total Blocking Time (TBT) Issues

Learn how to improve INP and TBT to boost your website’s speed with practical tips and strategies.