Font Size

import { ApiTable } from "@/components/api-table.tsx"; import { CustomizingYourTheme, ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx";

export const title = "font-size"; export const description = "Utilities for controlling the font size of an element.";

<ApiTable rows={[ [ "text-xs", "font-size: var(--text-xs); /* 0.75rem (12px) / \nline-height: var(--text-xs--line-height); / calc(1 / 0.75) /", ], [ "text-sm", "font-size: var(--text-sm); / 0.875rem (14px) / \nline-height: var(--text-sm--line-height); / calc(1.25 / 0.875) /", ], [ "text-base", "font-size: var(--text-base); / 1rem (16px) / \nline-height: var(--text-base--line-height); / calc(1.5 / 1) /", ], [ "text-lg", "font-size: var(--text-lg); / 1.125rem (18px) / \nline-height: var(--text-lg--line-height); / calc(1.75 / 1.125) /", ], [ "text-xl", "font-size: var(--text-xl); / 1.25rem (20px) / \nline-height: var(--text-xl--line-height); / calc(1.75 / 1.25) /", ], [ "text-2xl", "font-size: var(--text-2xl); / 1.5rem (24px) / \nline-height: var(--text-2xl--line-height); / calc(2 / 1.5) /", ], [ "text-3xl", "font-size: var(--text-3xl); / 1.875rem (30px) / \nline-height: var(--text-3xl--line-height); / calc(2.25 / 1.875) /", ], [ "text-4xl", "font-size: var(--text-4xl); / 2.25rem (36px) / \nline-height: var(--text-4xl--line-height); / calc(2.5 / 2.25) /", ], ["text-5xl", "font-size: var(--text-5xl); / 3rem (48px) / \nline-height: var(--text-5xl--line-height); / 1 /"], [ "text-6xl", "font-size: var(--text-6xl); / 3.75rem (60px) / \nline-height: var(--text-6xl--line-height); / 1 /", ], [ "text-7xl", "font-size: var(--text-7xl); / 4.5rem (72px) / \nline-height: var(--text-7xl--line-height); / 1 /", ], ["text-8xl", "font-size: var(--text-8xl); / 6rem (96px) / \nline-height: var(--text-8xl--line-height); / 1 /"], ["text-9xl", "font-size: var(--text-9xl); / 8rem (128px) / \nline-height: var(--text-9xl--line-height); / 1 */"], ["text-(length:<custom-property>)", "font-size: var(<custom-property>);"], ["text-[<value>]", "font-size: <value>;"], ]} />

Examples

Basic example

Use utilities like text-sm and text-lg to set the font size of an element:

<Figure> <Example> { <div className="flex flex-col gap-8"> <div> <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">text-sm</span> <p className="text-sm font-medium text-gray-900 dark:text-gray-200"> The quick brown fox jumps over the lazy dog. </p> </div> <div> <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">text-base</span> <p className="text-base font-medium text-gray-900 dark:text-gray-200"> The quick brown fox jumps over the lazy dog. </p> </div> <div> <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">text-lg</span> <p className="text-lg font-medium text-gray-900 dark:text-gray-200"> The quick brown fox jumps over the lazy dog. </p> </div> <div> <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">text-xl</span> <p className="text-xl font-medium text-gray-900 dark:text-gray-200"> The quick brown fox jumps over the lazy dog. </p> </div> <div> <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">text-2xl</span> <p className="text-2xl font-medium text-gray-900 dark:text-gray-200"> The quick brown fox jumps over the lazy dog. </p> </div> </div> } </Example> </Figure>

Setting the line-height

Use utilities like text-sm/6 and text-lg/7 to set the font size and line-height of an element at the same time:

<Figure> <Example> { <div className="flex flex-col gap-8"> <div> <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">text-sm/6</span> <p className="text-sm/6 text-gray-900 dark:text-gray-200"> So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I <em>was</em> a marine biologist. </p> </div> <div> <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">text-sm/7</span> <p className="text-sm/7 text-gray-900 dark:text-gray-200"> So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I <em>was</em> a marine biologist. </p> </div> <div> <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">text-sm/8</span> <p className="text-sm/8 text-gray-900 dark:text-gray-200"> So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I <em>was</em> a marine biologist. </p> </div> </div> } </Example> </Figure>

Using a custom value

<UsingACustomValue element="p" utility="text" name="font size" value="14px" variable="text-size" dataType="length" />

Responsive design

<ResponsiveDesign element="p" property="font-size" defaultClass="text-sm" featuredClass="text-base" />

Customizing your theme

<CustomizingYourTheme utility="text" name="font size" customValue="0.625rem" customName="tiny">

You can also provide default line-height, letter-spacing, and font-weight values for a font size:

</CustomizingYourTheme>