Minimum font size in browsers

A minimum font size raises small text on every site a reader visits. We set one in Chrome and Firefox and measured what happened to the text and the boxes around it.

Check your own browser

The two values below are measured on this page. The slider applies a minimum to three boxes of 10 pixel text.

To change the real setting:

• In Chrome, open chrome://settings/fonts and move the Minimum font size slider, which runs from 0 to 24.
• In Firefox, open Settings, find Fonts and press Advanced settings. Minimum font size offers None, then 9 to 72, for the language chosen under Fonts for.
• Safari on the Mac has “Never use font sizes smaller than” in its Advanced settings, according to Apple’s guide, which we read on 8 November 2026. We did not test Safari, and the guide doesn’t say how the setting treats units or layout.

Every unit is raised

We drew a string of 20 letters in each unit below, at each minimum, and worked out the size from its width. The numbers are Chrome’s, and Firefox drew the same size in every cell.

The raised size doesn’t compound. 1.5em inside a parent set to 10 pixels drew at 15 at a minimum of 12 in both browsers, because em starts from the 10 pixels the page asked for.

getComputedStyle disagrees

Chrome reports the raised size. Firefox reports the size the page asked for while drawing the larger one, so a script that reads font-size to fit text gets a number that doesn’t match the screen.

Chrome’s second minimum

Chrome keeps two preferences. The slider changes minimum_font_size. minimum_logical_font_size has no control on the settings page and is 6 unless something changes it. It raises text only when every size in the chain comes from the reader’s default: em, percent and keywords, with no pixel or rem value above them. Each column below is one value of that preference, with the slider left at zero.

So every Chrome user has a floor for relative text: 0.25em drew at 6 pixels in Chrome and 4 in Firefox with nothing changed. Chromium’s source explains the split. Pages that ask for an exact pixel size can break when it is raised, and the comment there names gamespot.com at a 9 pixel minimum. In our run rem and vw counted as exact sizes too.

Firefox sets it per language

Firefox stores one minimum per language group, while Chrome has a single value. We set Firefox’s Latin minimum to 24 and loaded 10 pixel Arial text with different lang attributes, then repeated the run with only the Japanese minimum set.

Text with no lang counted as Latin on our English build of Firefox. A reader who set the Latin minimum gets no floor on text marked as Russian or Japanese.

Line height depends on the unit

The table shows the height of one line of 10 pixel text.

Unitless values and normal grew in both browsers. 1.5em and pixel values held at 15, which puts 24 pixel text on a 15 pixel line. With a percent value, Chrome grew the line and Firefox held it at 15.

Widths and rows of tags

Firefox matched these widths and row counts, with ch within a tenth of a pixel. The CSS Values spec says a minimum must not affect font-relative lengths in a property. em obeyed that in both browsers and ch did not. The spec also says a minimum does affect em in media queries, and neither browser did that: (min-width: 50em) still matched in a 1000 pixel window at a minimum of 24.

Photo by Francis Glenn Marciano

Fixed heights clip the text

These boxes are 200 pixels wide and hold text that takes two lines at 10 pixels. Each cell gives the box height and then the height of its content. Firefox’s numbers were the same.

height: 2lh and line clamping grew with the text and cut it at a whole line. Only min-height showed everything. scrollHeight can undercount a single line in a box with a fixed line-height: at a minimum of 24, text needing 27 pixels sat in a 16 pixel box, and scrollHeight said 21 in Chrome and 22 in Firefox.

What the minimum leaves alone

font-size: 0 stayed at zero, so that way of closing the gap between inline-blocks still works. font-size: 1px doesn’t: the gap went from about a quarter of a pixel to 3.3 in Chrome and 3.3 in Firefox at a minimum of 12. On CSS zoom the browsers differ: Firefox raised the zoomed result, and Chrome raised the size first and then zoomed it. Buttons, selects and inputs followed the minimum in both.

How to keep a layout working

.tag { min-height: 1.5rem; line-height: 1.4; }
.card { min-height: 6rem; }

/* Two lines at most, cut at a whole line */
.title { height: 2lh; overflow: hidden; line-height: 1.3; }

• Use min-height on anything that holds text.
• Write line-height without a unit.
• Give tags and buttons a min-width in place of a width.
• Let rows of tags wrap, and leave the container’s height open.

Accessible font sizing covers what the setting does to rem lengths. To test a page:

1. Set Chrome’s minimum to 24 and reload.
2. Look for text cut off at the bottom of a box and for lines that overlap.
3. If the page isn’t in a Latin script, repeat in Firefox with Fonts for set to its language.

How this was tested

On 8 November 2026 a script loaded one test page in each browser at each setting, in a 1000 by 800 pixel window on Windows 11. Drawn size is the width of 20 Arial letters x divided by 10, since each is half an em wide.

• Chrome 156.0.8078.80, headless, with minimum_font_size at 0, 9, 12, 16 and 24, then minimum_logical_font_size at 0, 9, 12, 16 and 24, and one run with 9 and 14 together.
• Firefox 159.0.1, headless, with font.minimum-size.x-western at the same values, and font.minimum-size.ja at 24.

We did not run Safari, WebKit, Edge or any phone, and browser zoom was not part of the run. We read the CSS spec and the Chromium source on the same day. The full output is available as raw JSON. The test script and this article were prepared with help from AI.

Common questions

Sources

• CSS Values and Units Level 4: font-relative lengths
• font_size_functions.cc, Chromium source
• Change Advanced settings in Safari on Mac, Apple