Verificação HTML: CSS: “font-size”: X is not a “font-size” value.

Sobre este problema HTML

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: 16 instead of font-size: 16px. In CSS, unitless numbers (other than 0) are not valid lengths.
Typos in units or keywords. For example, font-size: 16xp, font-size: 1.2erm, or font-size: lage.
Using values from the wrong property. For example, font-size: bold (which belongs to font-weight) or font-size: center.
Invalid or unsupported syntax. For example, font-size: 16 px (with a space between the number and unit) or font-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.