# CSS: “font-size”: “px” is not a “font-size” value.
> Canonical HTML version: https://rocketvalidator.com/html-validation/css-font-size-px-is-not-a-font-size-value
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)
The `font-size` property sets the size of text and expects a valid CSS value — either a keyword (like `small`, `medium`, `large`), a numeric value with a unit (like `16px`, `1.2em`, `100%`), or `0` (which needs no unit). When the validator reports that `"px"` is not a valid `font-size` value, it means the property received the string `px` alone, without the required number preceding it.
This issue commonly arises in a few scenarios:
- **Typos or accidental deletion**: The number was removed during editing, leaving just the unit behind.
- **Template or CMS output**: A dynamic value (e.g., from a variable or database field) resolved to empty, producing something like `font-size: px;`.
- **Preprocessor errors**: A Sass, Less, or other CSS preprocessor variable was undefined or empty, resulting in a bare unit in the compiled CSS.
While most browsers will simply ignore the invalid declaration and fall back to an inherited or default font size, this creates unpredictable rendering. The text may appear at an unexpected size, and the behavior may differ across browsers. Invalid CSS also causes W3C validation failures, which can signal deeper problems in your code or build pipeline.
## How to Fix It
1. **Check for a missing number**: Look at the `font-size` declaration flagged by the validator and add the intended numeric value before the unit.
2. **Inspect dynamic values**: If the value comes from a variable, template engine, or CMS field, ensure it outputs a complete value (e.g., `16` or `16px`) rather than an empty string.
3. **Use a fallback**: When generating CSS dynamically, consider providing a fallback value in case the variable is empty.
## Examples
### ❌ Incorrect: Bare unit with no number
```html
This text has an invalid font size.
```
The validator will report that `"px"` is not a valid `font-size` value because no number precedes the unit.
### ✅ Correct: Numeric value with unit
```html
This text has a valid font size.
```
### ❌ Incorrect: Empty value from a template variable
This is a common pattern in templating systems that can produce invalid CSS:
```html
Dynamic content here.
```
When the template variable resolves to an empty string, only `px` remains.
### ✅ Correct: Using a keyword value
If you don't need a specific pixel size, CSS keywords are another valid option:
```html
This uses a keyword font size.
```
### ✅ Correct: Using other valid units
The `font-size` property accepts many unit types. All of these are valid:
```html
```
### ✅ Correct: Full document example
```html
Font Size Example
This paragraph has a valid font size of 16px.
```