Style text in CSS with a handful of properties: font-family picks the typeface, font-size sets the size (rem is best), font-weight: 700 makes it bold, text-decoration adds an underline, and text-align: center centres it. line-height and letter-spacing control spacing. Change any of them in the playground below and copy the CSS.
| Goal | CSS | Tailwind |
|---|---|---|
| Bold | font-weight: 700 | font-bold |
| Italic | font-style: italic | italic |
| Underline | text-decoration: underline | underline |
| Centre text | text-align: center | text-center |
| Bigger text | font-size: 1.25rem | text-xl |
| Looser lines | line-height: 1.6 | leading-relaxed (1.625) |
Updated
Instead of six separate reference pages, this one playground covers font, size, weight, style, underline details, alignment, line height and letter spacing together, writes the CSS and the Tailwind classes as you change them, and adds tested recipes for centring text, font stacks and loading web fonts.
font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;font-family: "Segoe UI", Candara, "Trebuchet MS", Tahoma, sans-serif;font-family: Georgia, "Times New Roman", Times, serif;font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", serif;font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;font-family: ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;text-align centres the lines inside the block. To centre the block itself, give it a width and margin-inline: auto.
<p style="text-align: center">Free delivery on orders over $40</p>
<p style="max-width: 20ch; margin-inline: auto; background: #eef2ff">A narrow block centred on the page</p>Two lines of CSS on the container centre any content in both directions, whatever its size.
<div style="display: grid; place-items: center; height: 140px; background: #0f172a; color: #fff; border-radius: 10px">
<p style="margin: 0">Centred both ways</p>
</div>The decoration properties change the underline without touching the text colour. text-decoration-skip-ink keeps lines from cutting through descenders.
<style>
a { color: #111; text-decoration: underline; text-decoration-color: #4F98FB;
text-decoration-thickness: 2px; text-underline-offset: 4px }
.wavy { text-decoration: underline wavy #dc2626 }
.strike { text-decoration: line-through }
</style>
<p><a href="#">Read the shipping policy</a></p>
<p><span class="wavy">Speling</span> mistakes and <span class="strike">$60</span> $45 prices</p>Point src at your WOFF2 file. One block per weight and style you actually use.
@font-face {
font-family: "Fieldwork";
src: url("/fonts/fieldwork-regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Fieldwork";
src: url("/fonts/fieldwork-bold.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
body { font-family: "Fieldwork", system-ui, sans-serif; }Request only the weights you use. display=swap sets font-display for you.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
<style>body { font-family: "Inter", system-ui, sans-serif; }</style>Body size, line height and measure set once; headings tighter. Adjust the colours and sizes to your design.
<style>
body { font: 1.0625rem/1.65 system-ui, sans-serif; color: #1f2937 }
h2 { font-size: clamp(1.5rem, 1.1rem + 2vw, 2.25rem); line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 .5rem }
p { max-width: 65ch; margin: 0 0 1rem }
small { font-size: .875rem; color: #4b5563 }
</style>
<h2>Plan your garden for spring</h2>
<p>Start with the beds that get the most sun. Tomatoes, peppers and herbs need six hours or more, while leafy greens cope with partial shade.</p>
<small>Last checked by our team in March.</small>| CSS | Tailwind |
|---|---|
| font-size: 0.875rem | text-sm |
| font-size: 1rem | text-base |
| font-size: 1.125rem | text-lg |
| font-size: 1.5rem | text-2xl |
| font-weight: 400 / 500 / 600 / 700 | font-normal / font-medium / font-semibold / font-bold |
| font-style: italic | italic |
| text-decoration: underline | underline |
| text-decoration-thickness: 2px | decoration-2 |
| text-underline-offset: 4px | underline-offset-4 |
| text-align: center / right / justify | text-center / text-right / text-justify |
| line-height: 1.25 / 1.5 / 1.625 | leading-tight / leading-normal / leading-relaxed |
| letter-spacing: -0.025em / 0.025em | tracking-tight / tracking-wide |
| text-transform: uppercase | uppercase |
| font-family: ui-monospace, … | font-mono |
Pixels give an exact size that ignores the reader's preferred text size. rem is relative to the root font size, 16px by default, so 1.125rem is 18px for most people and grows for readers who set a larger default.
clamp(min, preferred, max) is for sizes that should scale with the window. clamp(1.75rem, 1.2rem + 2.5vw, 3rem) is never smaller than 28px or larger than 48px and moves smoothly between. Keep a rem part in the middle value so browser zoom and text settings still have an effect.
Most reading problems come from three settings: text that is too small, lines that are too long and lines packed too tightly. A max-width of about 65ch on paragraphs, a font size of at least 1rem and a line height near 1.6 fix most of them before any styling.
Large headings want the opposite: tighter line height, around 1.1 to 1.2, and often a slightly negative letter-spacing. Small uppercase labels read better with a little positive letter-spacing.
Every web font is a download that can delay text. font-display: swap shows the fallback font straight away and swaps when the web font arrives, so readers never stare at invisible text. Self-hosting WOFF2 files avoids a connection to another domain.
If you use Google Fonts, request only the families and weights you need in one link, and add the preconnect hints it suggests. Choosing a fallback in the stack with similar proportions reduces the jump when the font swaps in.
Use font-weight: bold or a number such as 600 or 700. Numbers between 100 and 900 pick from the weights the font provides. If the font only has a regular weight, the browser fakes bold by thickening the letters, which looks heavier and less crisp than a real bold file.
text-align only centres horizontally. To centre vertically inside a box, make the box a flex or grid container: display: grid; place-items: center; centres the text both ways in one line. For a single line in a fixed-height bar, line-height equal to the bar height also works.
Use text-decoration-color, text-decoration-thickness and text-underline-offset. For example text-decoration: underline; text-decoration-color: #4F98FB; text-decoration-thickness: 2px; text-underline-offset: 4px; gives a thicker blue underline with space below the letters.
Usually not. A unitless value like 1.5 is multiplied by each element's own font size, so headings and small print inside the block keep sensible spacing. A fixed value like 24px is passed down as-is and can cramp larger text.
A comma-separated list of fonts in font-family. The browser uses the first one available and moves down the list if it is missing, ending with a generic family such as sans-serif or serif that always exists.
Related: Font pairing tool, PX to REM converter, HTML spaces and line breaks, Flexbox and grid cheat sheet, Readability checker.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.