YouTipPr Font Font Size
Example
Set different font sizes for HTML elements:
h1{font-size:250%}h2{font-size:200%}p{font-size:100%}
[Try it out »](
* * *
## Property Definition and Usage Instructions
The `font-size` property is used to set the font size.
`font-size` not only determines the display size of text, but also affects related layout calculations such as `em`, `line-height`, and `letter-spacing`.
| Default value: | medium |
| --- |
| Inherited: | yes |
| Version: | CSS1 |
| JavaScript syntax: | _object_.style.fontSize="larger" |
font-size: xx-small; font-size: x-small; font-size: small; font-size: medium; font-size: large; font-size: x-large; font-size: xx-large; font-size: larger; font-size: smaller; font-size: 12 px; font-size: 0.8 em; font-size: 80%; font-size: inherit;
* * *
## Browser Support
The numbers in the table indicate the first browser version that supports this property.
| Property | | | | | |
| --- | --- | --- | --- | --- | --- |
| font-size | 1.0 | 5.5 | 1.0 | 1.0 | 7.0 |
* * *
## Basic Concepts
`font-size` is used to set the size of text within an element.
The default root font size in browsers is usually `16px`.
That is, by default, `html { font-size: 100%; }` is typically equivalent to `html { font-size: 16px; }`.
This default value becomes the basis for calculating many relative units.
## Example
/* Set the default font size for the page */
html {
font-size:100%;/* Usually equivalent to 16px, respects user browser settings */
}
/* Set the body text size */
body {
font-size:16px;/* Common baseline font size for body text */
line-height:1.6;/* Use unitless line-height for easier inheritance */
}
/* Set the heading size */
h1 {
font-size: 2rem;/* By default, approximately equal to 32px */
}
> It's not recommended to arbitrarily set the root element's font size to a very small value, as this may affect users' browser font preferences and accessibility experience.
* * *
## Common Values for font-size
`font-size` can use keywords, length units, percentages, and functions.
Different values are suitable for different scenarios.
| Value Type | Example | Description | Applicable Scenarios |
| --- | --- | --- | --- |
| Keyword | `small`, `large` | Calculated by the browser according to preset ratios. | Simple pages, scenarios that need to follow user defaults. |
| Absolute Unit | `16px`, `12pt` | Relatively fixed size with strong controllability. | Precise interface control, print styles. |
| Relative Unit | `1rem`, `1.25em` | Calculated relative to the parent or root element. | Responsive design, component-based pages. |
| Viewport Unit | `4vw`, `3vmin` | Calculated relative to the browser viewport size. | Large headings, presentation pages, fluid layouts. |
| CSS Function | `clamp()`, `calc()` | Dynamically calculate font size through expressions. | Modern responsive layouts. |
* * *
## Keyword Values
CSS provides two types of font-size keywords.
One type is absolute size keywords, such as `small`, `medium`, and `large`.
The other type is relative size keywords, such as `larger` and `smaller`.
### Absolute Size Keywords
Absolute size keywords are not fixed pixel values, but rather levels calculated by the browser based on the default font size.
| Keyword | Approximate value under default 16px | Ratio | Applicable Scenarios |
| --- | --- | --- | --- |
| `xx-small` | Approximately 9px | 0.56 times | Very small annotations; not recommended for body text. |
| `x-small` | Approximately 10px | 0.625 times | Footnotes or auxiliary information. |
| `small` | Approximately 13px | 0.8 times | Auxiliary text. |
| `medium` | Approximately 16px | 1 time | Default body text. |
| `large` | Approximately 18px | 1.125 times | Small headings or emphasized text. |
| `x-large` | Approximately 24px | 1.5 times | Headings. |
| `xx-large` | Approximately 32px | 2 times | Large headings. |
| `xxx-large` | Approximately 48px | 3 times | Display-style headings. |
### Relative Size Keywords
`larger` and `smaller` will scale up or down relative to the parent element's font size.
They are suitable for simple scenarios where you want to follow changes in the parent font size.
## Example
/* Parent element font size is 16px */
.parent{
font-size:16px;
}
/* larger will scale up relative to the parent element; the specific ratio is determined by the browser */
.child-larger{
font-size:larger;
}
/* smaller will scale down relative to the parent element; the specific ratio is determined by the browser */
.child-smaller{
font-size:smaller;
}
> Keyword values are more accessible-friendly, but less controllable. In actual projects, `rem`, `em`, or `clamp()` are more commonly used.
* * *
## Absolute Units
Absolute unit values are relatively fixed and do not depend on the parent element's font size.
They are suitable for interfaces that require precise control, or for print styles.
| Unit | Meaning | Conversion Relationship | Applicable Scenarios |
| --- | --- | --- | --- |
| `px` | CSS logical pixels. | The most commonly used length unit on screens. | Web interfaces, component font sizes. |
| `pt` | Printing points. | 1pt = 1/72 inch, approximately equal to 1.333px. | Print styles. |
| `cm` / `mm` | Centimeters / millimeters. | 1cm = 37.8px, 1mm = 3.78px. | Print layout; rarely used in web pages. |
| `in` | Inches. | 1in = 96px. | For printing or special size conversions. |
| `pc` | Picas. | 1pc = 12pt = 16px. | Traditional typesetting scenarios; rarely used in web pages. |
## Example
/* Conversion relationships for absolute units */
/* 1in = 96px = 2.54cm = 25.4mm = 6pc = 72pt */
/* Typically use pt when printing */
@media print {
body {
font-size:12pt;
}
}
/* Typically use px, rem, or clamp() for screen display */
@media screen {
body {
font-size:16px;
}
}
> On modern screens, 1px usually refers to CSS logical pixels and may not necessarily equal one physical pixel.
* * *
## Relative Units
Relative units dynamically calculate their values based on reference values.
They are the most commonly used font size units in modern responsive design.
| Unit | Reference Object | Description | Typical Usage |
| --- | --- | --- | --- |
| `em` | Parent or current element's font size. | When used in `font-size`, it's relative to the parent element; nested elements will multiply the value. | Local component scaling. |
| `rem` | Root element `html` font size. | Not affected by nesting; more stable calculation. | Site-wide font size system. |
| `%` | Parent element's font size. | Behaves similarly to `em` in `font-size`. | Scales proportionally to the parent. |
| `ch` | Width of character `0`. | More often used to control line width. | `width: 60ch;` |
| `ex` | Height of lowercase letter `x`. | Highly influenced by font design. | Rarely used for special layouts. |
| `lh` | Element's line height. | A new unit introduced in CSS Values 4. | Spacing aligned with line height. |
### Difference between em and rem
When setting `font-size`, `em` calculates relative to the parent element's font size.
If multiple layers of nesting all use `em`, the font size will multiply layer by layer.
`rem` always calculates relative to the root element's font size, making it more stable.
## Example
/* Root element font size is 16px */
html {
font-size:16px;
}
/* em is affected by the parent element's font size */
.outer{
font-size:1.5em;/* 16px × 1.5 = 24px */
}
.middle{
font-size:1.5em;/* 24px × 1.5 = 36px */
}
/* rem always calculates relative to html */
.outer-rem{
font-size: 1.5rem;/* 16px × 1.5 = 24px */
}
.middle-rem{
font-size: 1.5rem;/* 16px × 1.5 = 24px, no multiplication */
}
> When using `em` in `font-size`, it's relative to the parent element's font size; however, when using `em` in the same element's `padding` or `margin`, it's relative to the element's own font size.
* * *
## Viewport Units
Viewport units calculate based on the browser window size.
They are suitable for implementing fluid layouts that change with screen width.
However, using viewport units alone may result in fonts being too small on mobile devices or too large on ultra-wide screens.
| Unit | Meaning | Description | Typical Scenario |
| --- | --- | --- | --- |
| `vw` | 1% of the viewport width. | The wider the viewport, the larger the font size. | Responsive headings. |
| `vh` | 1% of the viewport height. | Mobile devices are affected by browser toolbars. | Full-screen presentation pages. |
| `vmin` | 1% of the smaller value between `vw` and `vh`. | Suitable for balancing landscape and portrait orientations. | Adaptive large headings. |
| `vmax` | 1% of the larger value between `vw` and `vh`. | Greater variation range. | Display-style visual design. |
| `svh` / `dvh` / `lvh` | Small / dynamic / large viewport height. | Used to address changes in mobile browser toolbars. | Mobile full-screen pages. |
| `cqi` / `cqb` | Container query unit. | Relative to container size, not the entire viewport. | Component-level responsive layout. |
## Example
/* Using vw alone may cause overly aggressive font scaling */
h1 {
font-size: 5vw;
}
/* It's more recommended to use clamp() to set upper and lower limits */
h1 {
font-size: clamp(1.5rem, 5vw, 3.5rem);
}
/* Container query units are suitable for component-level responsive design */
.card{
container-type: inline-size;
}
.card-title{
font-size: clamp(1rem, 4cqi, 2rem);
}
> Container query units are suitable for component libraries and card layouts because component sizes don't necessarily equal browser viewport sizes.
* * *
## clamp() Function
`clamp()` is a very useful function in modern responsive typography.
It can limit the font size between a minimum and maximum value.
The middle value usually uses viewport units or calculation expressions, allowing the font size to change fluidly with the screen.
| Parameter | Meaning | Example | Description |
| --- | --- | --- | --- |
| Minimum value | The font size won't be smaller than this value. | `1rem` | Ensures readability on mobile devices. |
| Preferred value | The browser will prioritize using this dynamic value. | `2vw + 1rem` | Allows the font size to change fluidly with the screen. |
| Maximum value | The font size won't be larger than this value. | `3rem` | Avoids excessively large text on large screens. |
## Example
/* clamp(minimum, preferred, maximum) */
h1 {
font-size: clamp(1.75rem, 2.5vw + 1rem, 3.5rem);
}
h2 {
font-size: clamp(1.25rem, 2vw + 0.75rem, 2.25rem);
}
p {
font-size: clamp(1rem, 1vw + 0.5rem, 1.25rem);
}
/* Build a design system using CSS variables */
:root {
--text-sm: clamp(0.8rem, 1.5vw + 0.25rem, 0.95rem);
--text-md: clamp(1rem, 2vw + 0.5rem, 1.25rem);
--text-lg: clamp(1.25rem, 3vw + 0.5rem, 2rem);
--text-xl: clamp(1.75rem, 4vw + 0.75rem, 3.5rem);
}
.article-title{
font-size: var(--text-xl);
}
* * *
## min() and max() Functions
`min()` selects the smallest value among multiple values.
`max()` selects the largest value among multiple values.
They can be used for font sizes, but in fluid layouts they're usually less intuitive than `clamp()`.
| Function | Behavior | Example | Applicable Scenarios |
| --- | --- | --- | --- |
| `min()` | Select the smallest calculated result. | `min(5vw, 48