About This HTML Issue
The font-size property defines the size of text in CSS and accepts a specific set of value types. When the W3C validator reports that a value “is not a font-size value,” it means the value you provided doesn’t match any of the accepted formats. Browsers may attempt to ignore or guess what you meant, but this leads to unpredictable rendering across different browsers and devices.
This error commonly occurs for a few reasons:
-
Missing units on numeric values. Writing
font-size: 16instead offont-size: 16px. In CSS, unitless numbers (other than0) are not valid lengths. -
Typos in units or keywords. For example,
font-size: 16xp,font-size: 1.2erm, orfont-size: lage. -
Using values from the wrong property. For example,
font-size: bold(which belongs tofont-weight) orfont-size: center. -
Invalid or unsupported syntax. For example,
font-size: 16 px(with a space between the number and unit) orfont-size: auto(which is not valid for this property).
Valid font-size value types
| Type | Examples | Notes |
|---|---|---|
| Absolute keywords |
xx-small, x-small, small, medium, large, x-large, xx-large, xxx-large |
Browser-defined sizes |
| Relative keywords |
smaller, larger |
Relative to the parent element’s font size |
| Length units |
16px, 1.2em, 0.9rem, 12pt, 1vw |
Must include a unit (except 0) |
| Percentages |
100%, 120%, 80% |
Relative to the parent element’s font size |
| Math functions |
calc(1rem + 2px), clamp(1rem, 2vw, 3rem) |
CSS math expressions that resolve to a length |
Examples
Incorrect: missing unit on a number
<p style="font-size: 16;">This triggers a validation error.</p>
The value 16 is not valid because it lacks a CSS unit. Browsers may ignore this declaration entirely, leaving the text at its default or inherited size.
Correct: number with a valid unit
<p style="font-size: 16px;">This text has a valid font size.</p>Incorrect: typo in the unit
<p style="font-size: 1.2erm;">Typo in the unit.</p>
Correct: proper em unit
<p style="font-size: 1.2em;">Correct em unit.</p>Incorrect: value from the wrong property
<p style="font-size: bold;">Bold is not a font-size value.</p>Correct: using a valid keyword
<p style="font-size: large;">Using a valid size keyword.</p>Incorrect: space between number and unit
<p style="font-size: 16 px;">Space before the unit is invalid.</p>Correct: no space between number and unit
<p style="font-size: 16px;">No space between number and unit.</p>Full document example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Font Size Example</title>
<style>
.heading {
font-size: 2rem;
}
.body-text {
font-size: 1em;
}
.small-print {
font-size: 80%;
}
.responsive {
font-size: clamp(1rem, 2.5vw, 2rem);
}
</style>
</head>
<body>
<h1 class="heading">Valid heading size</h1>
<p class="body-text">Body text at 1em.</p>
<p class="small-print">Small print at 80%.</p>
<p class="responsive">Responsive text using clamp().</p>
</body>
</html>
To resolve this validation error, review every font-size declaration in your CSS or inline styles. Make sure each value is either a recognized keyword, a number immediately followed by a valid unit, a percentage, or a supported CSS function like calc(). If you intended 0, that is the one numeric value that does not require a unit — font-size: 0 is valid, though rarely useful in practice.
Find issues like this automatically
Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.