CSS font-sizeProperty

Example

Set the font size of different HTML elements.

h1 {font-size:250%} h2 {font-size:200%} p {font-size:100%}

Property definition and usage instructions

The font-size property is used to set the font size.

font-size not only determines the displayed text size, but also affectsem、line-height、letter-spacingand other related typography calculations.

Default value:	medium
Inherited:	yes
version:	CSS1
JavaScript Syntax:	object.style.fontSize="larger"

/*<absolute-size>, absolute size value*/ 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; /*<relative-size>, relative size value*/ font-size: larger; font-size: smaller; /*<length>, length value*/ font-size: 12px; font-size: 0.8em; /*<percentage>, percentage value*/ font-size: 80%; font-size: inherit;

Browser Support

The numbers in the table indicate the first browser version that supports the property.

Property
font-size	1.0	5.5	1.0	1.0	7.0

Basic concepts

font-sizeUsed to set the font size of text within an element.

The browser's default root font size is usually16px。

That is, by defaulthtml { font-size: 100%; }usually equivalent tohtml { font-size: 16px; }。

This default value serves as the calculation basis for many relative units.

Example

/* Set the default font size for the page */
html {
font-size: 100%; /* Usually equivalent to 16px, respecting user browser settings */
}

/* Set body text size */
body {
font-size: 16px; /* Common body base font size */
line-height: 1.6; /* Use unitless line-height for easier inheritance */
}

/* Set heading size */
h1 {
font-size: 2rem; /* Approximately 32px by default */
}

It is not recommended to arbitrarily fix the root element's font size to a very small value, because this may affect the user's browser font preferences and accessibility experience.

Common value types for font-size

font-sizeKeywords, length units, percentages, and functions can be used.

Different values suit different scenarios.

Value Types	Example	Description	Applicable scenarios
Keywords	`small`、`large`	Calculated by the browser according to preset ratios.	Suitable for simple pages and scenarios that need to follow the user's default settings.
Absolute Units	`16px`、`12pt`	The size is relatively fixed, offering strong controllability.	Precise interface control and print styles.
Relative Units	`1rem`、`1.25em`	Calculated relative to the parent element or root element.	Responsive design and component-based pages.
Viewport Units	`4vw`、`3vmin`	Calculated relative to the browser viewport size.	Large headings, showcase pages, and fluid typography.
CSS Functions	`clamp()`、`calc()`	Dynamically calculates font size via expressions.	Modern responsive typography.

Keyword Values

CSS provides two types of font size keywords.

One type is absolute size keywords, such assmall、medium、large。

The other type is relative size keywords, such aslargerandsmaller。

Absolute size keywords

Absolute size keywords are not fixed pixel values, but levels calculated by the browser based on the default font size.

Keywords	Approximate values under the default 16px	ratio	Applicable scenarios
`xx-small`	approximately 9px	0.56 times	Tiny annotation text, not recommended for body content.
`x-small`	About 10px	0.625x	Footnotes or auxiliary information.
`small`	About 13px	0.8 times	Helper text.
`medium`	About 16px	1x	Default body text.
`large`	About 18px	1.125x	Small headings or emphasized text.
`x-large`	About 24px	1.5 times	title.
`xx-large`	About 32px	2x	Large Heading.
`xxx-large`	About 48px	3x	Display headings.

Relative size keywords

largerandsmallerThey will scale up or down relative to the parent element's font size.

They suit simple scenarios where the font size needs to follow the parent.

Example

/* Parent element font size is 16px */
.parent {
font-size: 16px;
}

/* larger will scale up relative to the parent element, with the specific ratio determined by the browser */
.child-larger {
font-size: larger;
}

/* smaller will be scaled down relative to the parent element, the exact ratio determined by the browser */
.child-smaller {
font-size: smaller;
}

Keyword values are more accessibility-friendly but offer less control; in real projects, more often used arerem、emorclamp()。

Absolute Units

Absolute unit values are relatively fixed and do not depend on the parent element's font size.

They suit interfaces requiring 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 and component font sizes.
`pt`	Print point.	1pt = 1/72 inch, approximately 1.333px.	Print style.
`cm` / `mm`	Centimeters / millimeters.	1cm = 37.8px，1mm = 3.78px。	Print typography; rarely used in web pages.
`in`	inch.	1in = 96px。	Print or special size conversion.
`pc`	pica.	1pc = 12pt = 16px。	Traditional typography scenarios, rarely used in web pages.

Example

/* Absolute unit conversion relationships */
/* 1in = 96px = 2.54cm = 25.4mm = 6pc = 72pt */

/* Usually use pt when printing */
@media print {
body {
font-size: 12pt;
}
}

/* Screen displays usually use px, rem, or clamp() */
@media screen {
body {
font-size: 16px;
}
}

On modern screens, 1px usually refers to a CSS logical pixel, which is not necessarily equal to one physical pixel.

Relative Units

Relative units are calculated dynamically based on a reference value.

They are the most commonly used font-size units in modern responsive design.

unit	Reference Object	Description	Typical usage
`em`	The font size of the parent element or the current element.	used for`font-size`When relative to the parent element, they multiply cumulatively when nested.	Local component scaling.
`rem`	root element`html`font size.	Unaffected by nesting, providing more stable calculation.	Site-wide font size system.
`%`	Parent element font size.	In`font-size`behaves similarly`em`。	Scales proportionally to the parent.
`ch`	Character`0`the width.	More commonly used to control line width.	`width: 60ch;`
`ex`	The height of a lowercase letter x.	Significantly affected by font design.	A few special typography cases.
`lh`	Element line height.	A new unit added in CSS Values 4.	Spacing aligned with line height.

The difference between em and rem

emin settingsfont-sizeit is calculated relative to the parent element's font size.

If multiple levels of nesting all useemthe font size will be multiplied layer by layer.

remAlways calculated relative to the root element's font size, so it is 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 is always calculated relative to html */
.outer-rem {
font-size: 1.5rem; /* 16px × 1.5 = 24px */
}

.middle-rem {
font-size: 1.5rem; /* 16px × 1.5 = 24px, not multiplied cumulatively */
}

Infont-sizeUsed onemWhen used, it is relative to the parent element's font size; but in the same element'spaddingormarginUsed onemit is relative to the element's own font size.

Viewport Units

Viewport units are calculated based on the browser window size.

They suit implementing fluid typography that changes with screen width.

However, using viewport units alone may result in text that is too small on phones and too large on ultra-wide screens.

unit	Meaning	Description	Typical scenarios
`vw`	1% of the viewport width.	The wider the viewport, the larger the font size.	Responsive headings.
`vh`	1% of the viewport height.	On mobile, they are affected by the browser toolbar.	Full-screen display pages.
`vmin`	`vw`and`vh`1% of the smaller value.	Suitable for handling both landscape and portrait orientations.	Adaptive large headings.
`vmax`	`vw`and`vh`1% of the larger value.	Larger degree of variation.	Presentation-style visual design.
`svh` / `dvh` / `lvh`	Small / dynamic / large viewport height.	Used to solve the problem of mobile browser toolbar changes.	Mobile full-screen pages.
`cqi` / `cqb`	Container query units.	Relative to the container size, not the entire viewport.	Component-level responsive typography.

Example

/* When using vw alone, font-size scaling may be too aggressive */
h1 {
font-size: 5vw;
}

/* It is more recommended to use clamp() to set the 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 suit component libraries and card layouts, because a component's size is not necessarily equal to the browser viewport size.

clamp() function

clamp()It is a very practical function in modern responsive typography.

It can constrain 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 with the screen.

Parameter	Meaning	Example	Description
minimum value	The font size will not be smaller than this value.	`1rem`	Ensures readability on mobile devices.
preferred value	The browser will first try to use this dynamic value.	`2vw + 1rem`	Allows the font size to fluidly change with the screen.
maximum value	The font size will not be larger than this value.	`3rem`	Prevents text from being too large 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 with 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()Takes the smallest value among multiple values.

max()Takes the largest value among multiple values.

They can be used for font size, but in fluid typography they are usually not as good asclamp()intuitive.

Function	Behavior	Example	Applicable scenarios
`min()`	Choose the smaller computed value.	`min(5vw, 48px)`	Only limit the maximum.
`max()`	Choose the larger computed value.	`max(1rem, 2vw)`	Only limit the minimum.
`clamp()`	Set minimum, preferred, and maximum values at the same time.	`clamp(1rem, 2vw, 2rem)`	A complete fluid font size solution.

Example

/* The font size will not exceed 48px, but may be too small on small screens */
h1 {
font-size: min(5vw, 48px);
}

/* The font size will not be less than 16px, but may be too large on large screens */
h2 {
font-size: max(16px, 3vw);
}

/* Limit both the minimum and maximum values, better suited for real projects */
h3 {
font-size: clamp(16px, 3vw, 32px);
}

calc() Function

calc()Different units can be mixed in calculations within CSS.

It is often used to combine fixed values with relative values.

In font size scenarios,calc()often withvw、remUsed together.

Example

/* Use calc() to combine rem and vw */
h1 {
font-size: calc(1.5rem + 2vw);
}

/* Using calc() in clamp() makes the code clearer */
h2 {
font-size: clamp(1.25rem, calc(1rem + 2vw), 3rem);
}

/* Note: spaces must be kept on both sides of the operator */
p {
font-size: calc(1rem + 0.25vw);
}

calc(1rem+2vw)This kind of syntax is incorrect; spaces should be written on both sides of the operator, e.g.calc(1rem + 2vw)。

Inheritance and cascade

font-sizeIt is an inherited property.

If a child element has no declared font size, it inherits the parent element's computed font size.

this is alsoemOne of the reasons why cumulative multiplication problems easily occur when nesting.

Example

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>font-size inheritance example</title>
<style>
.article {
font-size: 18px; /* Child elements inherit this font size by default */
}

.article p {
font-size: 1em; /* equals 18px */
}

.article .note {
font-size: 0.875em; /* 18px × 0.875 = 15.75px */
}
</style>
</head>
<body>
<div class="article">
<p>This is some text.</p>
<p class="note">This is a smaller explanatory text.</p>
</div>
</body>
</html>

Best Practices

In real projects, it is not recommended to hard-code all text aspx。

A better approach is to use root font size, CSS variables, andclamp()Combines into a stable font size system.

Not recommended	Recommended Practice	Reason
`font-size: 12px;`Used for large body text.	`font-size: 1rem;`	Body text that is too small can harm the reading experience.
All layers of components use`em`。	For global font sizes, use`rem`, and for local scaling, use`em`。	Avoid losing control of font size due to nested multiplication.
Title only`font-size: 6vw;`。	`font-size: clamp(1.75rem, 4vw, 3.5rem);`	Avoids text being too small on small screens and too large on large screens.
Arbitrarily defining font sizes across different pages.	Use CSS variables to unify the font-size scale.	Makes it easier to maintain a consistent visual system.

Example

/* Recommended: use CSS variables to manage font size system */
:root {
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-lg: 1.125rem;
--font-size-xl: clamp(1.5rem, 3vw, 2.5rem);
--font-size-hero: clamp(2rem, 6vw, 4.5rem);
}

body {
font-size: var(--font-size-base);
line-height: 1.6;
}

.caption {
font-size: var(--font-size-sm);
}

.article-title {
font-size: var(--font-size-xl);
}

.hero-title {
font-size: var(--font-size-hero);
}

Generally can be usedremEstablish a global font size system, useemfor local proportional scaling, useclamp()for responsive headings.

Recommended type scale system

The following is a font-size token system based on the Modular Scale approach.

Every token usesclamp()Ensure appropriate sizes at both the smallest and largest screens.

Token	Purpose	Recommended clamp() values	Notes
`--text-xs`	Labels, badges	`clamp(0.7rem, 0.5vw + 0.5rem, 0.8rem)`	Not recommended to go below 11px.
`--text-sm`	Auxiliary text, captions	`clamp(0.85rem, 0.8vw + 0.6rem, 0.95rem)`	Commonly seen in annotations and secondary information.
`--text-md`	Body Baseline	`clamp(1rem, 1vw + 0.75rem, 1.125rem)`	Recommended as the default body font size.
`--text-lg`	Subtitle	`clamp(1.15rem, 1.5vw + 0.8rem, 1.5rem)`	Article or card subheadings.
`--text-xl`	h3-level heading	`clamp(1.25rem, 2vw + 0.75rem, 2rem)`	Subsection title.
`--text-2xl`	h2-level heading	`clamp(1.5rem, 2.5vw + 1rem, 2.5rem)`	Section title.
`--text-3xl`	h1-level heading	`clamp(2rem, 4vw + 1rem, 3.5rem)`	Page main title.
`--text-hero`	Display-type large heading	`clamp(2.5rem, 6vw + 1rem, 5rem)`	Homepage or Landing title.

Example

/* Recommended: Use clamp() + CSS variables to manage font size system */
:root {
--text-xs: clamp(0.7rem, 0.5vw + 0.5rem, 0.8rem);
--text-sm: clamp(0.85rem, 0.8vw + 0.6rem, 0.95rem);
--text-md: clamp(1rem, 1vw + 0.75rem, 1.125rem);
--text-lg: clamp(1.15rem, 1.5vw + 0.8rem, 1.5rem);
--text-xl: clamp(1.25rem, 2vw + 0.75rem, 2rem);
--text-2xl: clamp(1.5rem, 2.5vw + 1rem, 2.5rem);
--text-3xl: clamp(2rem, 4vw + 1rem, 3.5rem);
--text-hero: clamp(2.5rem, 6vw + 1rem, 5rem);
}

body {
font-size: var(--text-md);
line-height: 1.6;
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
small { font-size: var(--text-sm); }

Recommended practices and what to avoid

Below are several sets of recommended and non-recommended practices for common scenarios.

Scenarios	Not recommended	Recommended Practice
Root font size setting.	`html { font-size: 10px; }`	`html { font-size: 100%; }`
Body Font Size	`p { font-size: 14px; }`	`p { font-size: 1rem; }`
Heading Font Size	`h1 { font-size: 48px; }`	`h1 { font-size: clamp(1.75rem, 4vw + 1rem, 3.5rem); }`
Small Text	`small { font-size: 11px; }`	`small { font-size: max(0.75rem, 12px); }`
Responsive font size.	with multiple`@media`Switch fixed values at breakpoints	Usage`clamp()`Implement fluid transitions
accessibility	`html { font-size: 62.5%; }`	Do not set the root font size, or use`100%`

do nothtmlorbodyFixed on toppxSetting the root font size will override the preferred font size set by the user in the browser, causing the large-text accessibility feature to fail.

Deriving the clamp() fluid font-size formula

clamp()The middle value usually uses viewport units plus a rem baseline.

This forms a "anchor + slope" linear interpolation formula, precisely controlling the rate at which the font size changes across different screen widths.

Formula derivation steps

Suppose the font size needs to transition smoothly from 16px to 24px between viewports of 320px and 1240px.

Steps	formula	Calculation in this example
1. Calculate the slope	(max px - min px) / (max vp - min vp)	(24 - 16) / (1240 - 320) = 0.00869, approximately 0.87vw
2. Calculate the intercept	Minimum px - slope × minimum vp	16 - 0.00869 × 320 = 13.2px, approximately 0.825rem
3. Derive the preferred value	Slope × 100vw + intercept	0.87vw + 0.825rem

Example

/* Formula: preferred = slope × 100vw + intercept */
/* Slope = (max px - min px) / (max vp - min vp) */
/* Intercept = minimum px - slope × minimum vp */

/* Example: transition from 16px to 24px between 320px and 1240px viewport */
/* slope = (24-16) / (1240-320) = 0.00869 ≈ 0.87vw */
/* intercept = 16 - 0.00869×320 ≈ 13.2px ≈ 0.825rem */

p {
font-size: clamp(1rem, 0.87vw + 0.825rem, 1.5rem);
}

clamp()Supported in Chrome 79+, Firefox 75+, Safari 13.1+, and Edge 79+, so it is safe to use in production.

Detailed explanation of the min() and max() functions

min(a, b, ...)Returns the minimum of multiple values, which is equivalent to setting an "upper limit."

max(a, b, ...)Returns the maximum of multiple values, which is equivalent to setting a "lower limit."

They can accept any number of arguments, and different units can be mixed among the arguments.

Function	Behavior	Effect	Applicable scenarios
`min()`	Select the minimum value among all parameters	Set Upper Limit	Prevent font size from being too large.
`max()`	Select the maximum value among all parameters	Set Lower Limit	Ensures a minimum readable font size.
`clamp()`	Simultaneously limit the minimum, preferred, and maximum values	Set upper and lower limits.	A complete fluid font size solution.

Example

/* min() — font size no more than 2rem */
h2 {
font-size: min(5vw, 2rem);
}

/* max() — font size no less than 1rem */
small {
font-size: max(0.75vw, 1rem);
}

/* Combination: min and max are equivalent to clamp */
/* clamp(MIN, VAL, MAX) is equivalent to max(MIN, min(VAL, MAX)) */
h1 {
font-size: max(1.5rem, min(4vw, 3rem));
}

/* Multiple parameters: takes the minimum of the three */
.label {
font-size: min(1rem, 3vw, 14px);
}

/* Mixed units */
.fluid {
font-size: max(12px, 1.2vw + 0.5rem);
}

Detailed explanation of the calc() function

calc()Supports the four arithmetic operations of addition, subtraction, multiplication, and division, and can mix any units.

In font size scenarios, often used withremandvwUse in combination.

Arithmetic operation rules

operation	Syntax	Limit	Example
addition	`calc(1rem + 0.5vw)`	There must be spaces on both sides of the operator.	`font-size: calc(1rem + 0.5vw);`
subtraction	`calc(2rem - 4px)`	There must be spaces on both sides of the operator.	`font-size: calc(2rem - 4px);`
multiplication	`calc(1.5 * 16px)`	One of the values must be unitless.	`font-size: calc(1.5 * 16px);`
division	`calc(24px / 1.5)`	The right side must be a unitless number, and not 0.	`font-size: calc(24px / 1.5);`

calc(1rem+2px)Is incorrect syntax; spaces should be written on both sides of the operator, the correct syntax iscalc(1rem + 2px)。

Example

/* Basic arithmetic operations */
font-size: calc(1rem + 0.5vw); /* Addition */
font-size: calc(2rem - 4px); /* Subtraction */
font-size: calc(1.5 * 16px); /* Multiplication (one must be a unitless number) */
font-size: calc(24px / 1.5); /* Division (the right side must be a unitless number) */

/* Pair with CSS variables */
:root {
--scale: 1.25;
--base: 1rem;
}
h3 {
font-size: calc(var(--base) * var(--scale));
}

/* Nested calc (modern browsers support omitting the inner calc) */
font-size: calc(clamp(1rem, 2vw, 2rem) * 0.8);

Use calc to build a modular font scale

Throughcalc()And CSS variables, you can implement a font-size ladder based on a fixed ratio.

The following example uses the Major Third (1.25) ratio.

Example

/* Use calc + CSS variables to implement Major Third (1.25) ratio */
:root {
--ratio: 1.25;
--step-0: 1rem; /* 16px */
--step-1: calc(var(--step-0) * var(--ratio)); /* 20px */
--step-2: calc(var(--step-1) * var(--ratio)); /* 25px */
--step-3: calc(var(--step-2) * var(--ratio)); /* 31.25px */
--step--1: calc(var(--step-0) / var(--ratio)); /* 12.8px */
}

p { font-size: var(--step-0); }
h3 { font-size: var(--step-1); }
h2 { font-size: var(--step-2); }
h1 { font-size: var(--step-3); }
small { font-size: var(--step--1); }

Inheritance and cascade

font-sizeIt is an inherited property.

If a child element does not explicitly set a font size, it inherits the parent element's computed value, not the declared value.

Inherit the calculation process

Below is a typical font-size inheritance chain.

Selectors	declared value	Calculation Result	Description
`html`	`100%`	16px	Browser default value.
`body`	inherit	16px	Inherited from html.
`.article`	`1.125rem`	18px	Calculated based on the root font size.
`.article p`	inherit	18px	What is inherited is the computed 18px, not 1.125rem.
`.article em`	`1em`	18px	`em`Based on the parent element’s computed value, 1 × 18px = 18px.

Specificity and cascade order

When multiple rules simultaneously setfont-sizeWhen applied, the following priorities take effect from high to low.

Precedence	Source	Example
1 (highest)	`!important`inline style	`<p style="font-size: 20px !important">`
2	`!important`Stylesheet rules.	`p { font-size: 20px !important; }`
3	inline style	`<p style="font-size: 18px">`
4	ID selector	`#title { font-size: 24px; }`
5	Class / pseudo-class / attribute selectors	`.heading { font-size: 22px; }`
6	Element / pseudo-element selectors	`p { font-size: 16px; }`
7 (lowest)	Inherited / browser default styles	Comes from the parent element or browser defaults.

Example

/* Specificity from high to low */
/* 1. !important inline style */
/* <p style="font-size: 20px !important"> */

/* 2. !important Stylesheet Rules */
p { font-size: 20px !important; }

/* 3. Inline style */
/* <p style="font-size: 18px"> */

/* 4. ID Selectors */
#title { font-size: 24px; }

/* 5. Class/Pseudo-class/Attribute selectors */
.heading { font-size: 22px; }

/* 6. Element/Pseudo-element Selectors */
p { font-size: 16px; }

/* 7. Inheritance / Browser default styles */

do nothtmlorbodyFixed on toppxSetting the root font size will override the user's browser font preferences. Please usehtml { font-size: 100%; }Or simply do not set it.

Interactive demo

Through the demo below, you can intuitively see the font-size effects under different units.

Select the unit type and drag the value slider, and the preview area will update in real time.

font-size unit conversion and preview

unit

value 16px

CSS font-size Tutorial Example Text

Summary

font-sizeIt is the foundational property of the CSS typography system.

pxSuitable for precise control,remSuitable for a global font size system,emSuitable for local scaling.

Viewport units suit fluid typography, but it is best to pair them withclamp()Limit the upper and lower bounds.

In real projects, it is recommended to use CSS variables to uniformly manage font sizes, prioritizing readability and responsive experience.

Recommended for screen body textrem + clamp(), use for print stylespt。

Do not lock the root font size, and always set a minimum floor for small text (recommended no lower than 12px / 0.75rem).

For component-level responsiveness, prioritize container query unitscqi / cqb。

CSS Tutorial:CSS Font

CSS Reference Manual:font property

other extensions

CSS font-sizeProperty

Property definition and usage instructions

Browser Support

Basic concepts

Example

Common value types for font-size

Keyword Values

Absolute size keywords

Relative size keywords

Example

Absolute Units

Example

Relative Units

The difference between em and rem

Example

Viewport Units

Example

clamp() function

Example

min() and max() functions

Example

calc() Function

Example

Inheritance and cascade

Example

Best Practices

Example

Recommended type scale system

Example

Recommended practices and what to avoid

Deriving the clamp() fluid font-size formula

Formula derivation steps

Example

Detailed explanation of the min() and max() functions

Example

Detailed explanation of the calc() function

Arithmetic operation rules

Example

Use calc to build a modular font scale

Example

Inheritance and cascade

Inherit the calculation process

Specificity and cascade order

Example

Interactive demo

Summary

Related Articles