PT, PX, REM, or EM: Which Font Size Unit is Best for SEO?

There are a few different kinds of people who run websites. Some use whatever page builder they find first and are perfectly happy to spend their careers on Squarespace or Wix or whatever. Some want to have enough control that they can customize more granular elements but are satisfied with the basic knobs and levers that WordPress gives them.

And some, like me, love to get deep into the gritty confines of the code, tweaking everything we can get our hands on. I love nothing more than just fiddling around with details and finding micro-optimizations that could give me an edge.

Is it worth it? Is it going to make or break my site? Well, probably not. I make a lot of tweaks that most people aren't even going to recognize as changes, and if I'm being honest, I doubt Google really cares about a lot of it.

At least individually.

But, once you have a dozen or two tweaks going, suddenly, your site feels a little snappier, a little more responsive. Suddenly, it's a nicer experience to browse. Suddenly, maybe the search engines take notice and think, "Hey, this guy knows what he's doing."

That's what I'm shooting for. It's why I'm often in the weeds with making tiny changes you'd never notice if you weren't comparing code bases between updates. But hey, I have fun doing it, and it definitely doesn't hurt anything.

One of those tweaks I recently made was to font units. And if you're sitting here wondering why font units matter or even learning for the first time that HTML and CSS support multiple different font units, well. This post is for you.

Do Search Engines Care About Font Size?

The first question you might have is whether or not the search engines care about font sizing at all.

Obviously, they care about certain kinds of font sizing. When Google's bots crawl your site, certain elements are given preference when they're larger, most notably, things like your H1 and H2 headings and subheadings.

Is that necessarily the same as font size, though? Kind of.

There was a time many, many years ago when websites were coded by hand, and the tools you had available were very limited. Page Builders didn't exist, and certainly not the drag-and-drop, no-code website creators we have today. Back then, you would have a lot of people who knew enough code to mimic the look of a site but didn't necessarily have any concept for best practices.

In these cases, you'd find sites where your page title and subheadings were just normal text, with formatting like increased size applied. They didn't use H1 and H2, they used <b> and <font size="4"> or whatever.

Early search engines were built to be able to recognize these kinds of idiosyncrasies and treat them as roughly equivalent to the "best practice" use of CSS and font units.

This was all before the idea of being able to browse the internet on a phone existed, so it was a very different world.

What about modern search engines? Do they care about font size today?

The answer is yes, though Google doesn't provide a nice handy reference like they do for a lot of SEO best practices. It's buried in various documents for things like their site usability scans and audits using Lighthouse, for example.

This gets to the root of the issue. Google doesn't care about the specific sizes you use; they care about the user experience. If your font is too small, people will have a hard time reading it. Likewise, if it's too large, very little fits on the screen. You need to be within a sweet spot.

Font size matters, but when you specify size, you pick a unit to use to specify. Most people default to px, either because that's what their page builders use or that's what Google uses in their references. Others default to pt because that's how it's measured in word processors and similar tools.

Does it matter which unit you use? What even are the differences?

Do Search Engines Care About Font Unit Type?

I would say the answer here is yes because something as vastly complex as Google's algorithm likely considers every single bit of data it can unless it's explicitly excluded. They probably use something akin to AI analysis these days, and it might even analyze details no human recognizes it pays attention to.

Is it a search ranking factor? Will changing your unit type shoot you from rank 8 to rank 5, or vice versa? I doubt it. If it's a ranking factor at all, it's a very small one.

One of the throughlines with Google's SEO rules and best practices is to focus on usability. They don't want every website to look the same or to suppress creativity. They just want to make sure the results they serve are the most useful and satisfying for the people who click through.

That's why they say things like "don't generate your text with a script" or "don't rely on text on images" for best practices and why they didn't like Flash-based websites back before Flash died. Those were harder for them to index and impossible for tools like screen readers to parse. It's also why they recommend accessible fonts over more creative but less usable fonts.

Units have tangible effects on how a site is displayed across different devices and screen sizes, so they can be important for usability. There's not necessarily a "right answer," and you aren't going to get a search penalty or be deindexed for picking the wrong one. But, you can make your site just that hair better, just a little more responsive, and that (to me anyway) is a benefit.

To me, that tiny bit of lower friction is value because it's a boost to usability, to core web vitals, to time spent on page, and other metrics that are more important to SEO. Any little tweak or change I can make to boost those, I will.

Absolute Units Versus Relative Units

Now, let's get into some of the nitty-gritty with font-size units. The first thing to talk about is the two different types of units: absolute units and relative units. And no, they didn't name the term after that one big sheep.

Absolute units are units that are a fixed physical size, regardless of the size of the medium displaying them. Absolute units are very valuable for certain uses, particularly when you're creating something for print. If you pick CM as a unit type, you know that a 10CM bit of text, when printed, is going to measure ten centimeters.

There are a bunch of different absolute units. IN, MM, and CM are all the same units they are in measurements: inches, millimeters, and centimeters. Then you have a few more tricky units:

• PC. One PC is 12 PT.
• PT. One PT is 1/72nd of an inch. So a typical 12 pt font is 12/72 of an inch.
• PX. One PX is 1/96th of an inch. This is the defined physical size of a pixel and has a very long history behind the definition. I'm not going to get into it here.

The problem with absolute units is the same as the benefit: they're fixed. The larger your device's screen resolution, the smaller they appear. A 100-pixel letter is going to take up a lot more of the screen when you're using an 800x600 monitor than if you're using a 3840x2160 monitor.

"So how do you pick a font that looks good on both," you ask? Use relative units.

Relative units are defined as a size relative to something else. The simplest is PCT or %; a line of text at 10% font size means it's 10% of the height of the screen. If your screen is 800x600, it will display as 60 pixels tall. If your monitor is 3840x2160, it will display as 216 pixels tall. It takes up the same proportion of the screen.

There are a lot of different relative units.

• %. A percentage of the full size of the parent element of the property.
• Em. A size relative to the current font size of the element.
• Rem. A Size relative to the font size of the root (or <html>) element.
• Ch. A size relative to the number of characters of an element.
• Vh. A size relative to the height of the viewport (the area of the screen, minus UI and other elements.)
• Vw. A size relative to the width of the viewport.
• Vmin. A size relative to the smaller dimension of the viewport (so it adapts for portrait vs. landscape.)
• Vmax. A size relative to the larger dimension of the viewport, like above.
• Ex. A size relative to the lowercase x of the font being used.

Some of these you'll pretty much never see in the wild, like Ex or Ch. They're useful in very niche design situations, but that's about it. For general website design? Not a chance.

Evaluating Unit Types for Font Sizes

Generally speaking, I find that there are five main types of units that you might use in your web design. They are PT, PX, VW, EM, and REM. So, I'm going to talk about each of them in a bit more detail, rate them, and tell you which one I recommend and why.

PT

PT, or Point, is defined as 1/72nd of an inch, as I mentioned above. It's a unit of measure in typography and, for physical printing, was considered the smallest possible unit. You couldn't get any smaller because machines at the time couldn't be any more precise.

In fact, the actual size of the PT has changed over time and, in fact, is only standardized as it is now to make cross-communication and printing easier. As with most units of measure, there are also a ton of competing standards. It's all very interesting and completely irrelevant to our discussions.

The fact is that the Point is awkward, a little inconsistent, and more of a holdover from more print-focused uses of measurement. It doesn't map easily or adjust well to differently-sized devices, so when you code a website using PT fonts, you need breakpoints and different font sizes at different viewport sizes, and it's just a whole mess.

I give PT a 1 out of 10. It's awkward, it's difficult to use consistently, and it's only as widely used as it is because it's the default in a lot of legacy software.

PX

PX, or Pixel, is defined as 1/96th of an inch. It has the benefit of being more aligned with computer screens, but it really was only nicely mapped for a few years. It wasn't as nicely mapped for early CRTs, and it ends up not being nicely mapped on today's very high-resolution screens. So, high-DPI screens, high zoom levels, or low zoom levels all tend to break with PX font measurements.

And, like PT, it's an absolute unit, so it doesn't adjust nicely on its own. You need the same breakpoint coding for responsive design.

I give PX something like a 4 out of 10. It's better than Points, but it can hurt usability on extreme ends of the scale and in unusual circumstances, and it's more difficult and tedious to code than relative units.

That said, PX is still useful for design elements, as long as it's not text elements. Drawing an HTML table and want a 4px border around the cells? Perfect, do it. Want a 10x10px image for your website's favicon? Go for it. If the element you're using doesn't need to scale, setting a pixel size is perfect.

VW

VW is not a font size unit sponsored by an automaker. It's a percentage-based unit that assigns a size relative to the width of the viewport. That means something you have set to be 10VW will be 10% of the width of the viewport.

Setting things to scale to the size of the viewport is great for UI elements but slightly trickier with text. It's very useful for your H1s, your Hero Copy, and other above-the-fold elements meant to catch the eye. It's a lot less useful as your baseline unit for everything.

It also ignores user settings. If a user browses the web at 150% zoom because they have poor eyesight, VW ignores that zoom level. You need to add more CSS to the mix – the clamp() element – to allow it to adjust.

I give it a 5 out of 10. It's nice in certain circumstances, but the drawbacks can hurt your usability.

EM

The EM unit is a relative unit, and it's relative to the parent element of the text. If you have your root HTML, a DIV, and a nested DIV inside the first DIV, you can use EM to set the second DIV to be a font relative to the font specified in the first DIV.

If that sounds complex, that's because it can be. EM inherits from its parent element, so it only cares about the element one step above it. If you have elements nested 10 deep, element 10 draws from element 9 and doesn't care about elements above that. Except, if element 9 is also EM, it cares about 8. Critically, changing 8 cascades; it changes 9, which changes 10.

This is nice if you have everything set up in a logical way. But, if you have inconsistent uses of units across different nested elements, making one high-level change can cause all sorts of problems down the chain.

EM is also multiplicative. That means if you have an element at, say, 20 pixels, and the child element is 2EM, the child element becomes 40 pixels. If you want the child element to be smaller, you would do .5EM for 10 pixels.

EM MUST have a top-level unit to inherit from. You can't set your root HTML to be an EM unit because it would need to inherit a value from somewhere, and it doesn't have one. You generally need at least one font size specified somewhere (usually the root) from which all other EMs are derived.

I give EM an 8 out of 10. It's great for consistent layouts and scaling, but if you have a lot of complexity in your design, you can end up troubleshooting a lot of nested elements inheriting from other nested elements. You can, however, specify non-relative units for parent elements and EMs for their children without having to be nested relatives, and it works out pretty well.

REM

REM is a lot like EM, except it's relative to the root size, no matter where in your code or how deep the nesting becomes. If you have 10 nested elements and element 10 is REM, it doesn't care about elements 2 through 9; it looks at element 1, the root.

So, you set a value for your root size and use REM for adjustments just like EM, multiplicatively. If your root is 16PX, and your header element is 3REM, it becomes 48PX.

REM is nice because it respects user zoom levels and browser settings, it's a relative measure to a centralized value you can track easily and it is responsive by default because of how it works. In my testing, it gave me a small boost to core web vitals because it doesn't need to do a lot of inheritance for cumulative layout shift, and it only takes a tiny bit of CSS to implement properly.

Overall, I give REM a 9 out of 10. It's not perfect, but that's because there's no perfect, one-size-fits-all unit. You'll generally end up mixing and matching different units for different elements if you want truly granular control. I did, however, switch most of the units on my site to REM, and I like how it's turning out so far.