Beginner10 min readShare
Was this chapter helpful?
Share
Try these free tools
Fonts, sizes, weights, and spacing — everything you need to know about text on the web. Use our Font Picker to browse and pair Google Fonts instantly.
Use consistent sizes from a scale. Here's the Tailwind CSS default type scale.
text-xs12pxExtra small — captions, labels, fine printtext-sm14pxSmall — secondary text, descriptions, metadatatext-base16pxBase — body text, paragraphs (browser default)text-lg18pxLarge — emphasized body text, subtitlestext-xl20pxExtra large — section subtitles, card headingstext-2xl24px2XL — section headingstext-3xl30px3XL — page headingstext-4xl36px4XL — hero headingstext-5xl48px5XL — large hero headingsAa Bb Cc
font-light(300)Subtle, delicate
Aa Bb Cc
font-normal(400)Body text default
Aa Bb Cc
font-medium(500)Slightly emphasized
Aa Bb Cc
font-semibold(600)Subheadings, labels
Aa Bb Cc
font-bold(700)Headings, emphasis
Aa Bb Cc
font-extrabold(800)Hero headlines
Space between lines of text. Tighter for headings, looser for body text. See our spacing guide for more on vertical rhythm.
leading-tight1.25Headingsleading-snug1.375Subheadingsleading-normal1.5Body text (default)leading-relaxed1.625Easy readingleading-loose2Spacious textSpace between individual characters. Wider for uppercase labels.
tracking-tighter-0.05emLarge headingstracking-tight-0.025emHeadingstracking-normal0emDefaulttracking-wide0.025emBody texttracking-wider0.05emUppercase labelstracking-widest0.1emALL CAPS textInter
Body text would look like this in Inter.
Inter + Inter
Clean, modern, versatile. The default for most web apps.
Playfair Display
Body text would look like this in Source Sans.
Playfair Display + Source Sans
Elegant serif + clean sans-serif. Great for blogs and magazines.
Space Grotesk
Body text would look like this in Inter.
Space Grotesk + Inter
Geometric, techy vibe. Perfect for SaaS and tech products.
DM Sans
Body text would look like this in DM Sans.
DM Sans + DM Sans
Friendly, rounded. Great for consumer apps.
Inter
Roboto
Open Sans
Poppins
Montserrat
Lato
DM Sans
Space Grotesk
Plus Jakarta Sans
Nunito
Raleway
Work Sans
Outfit
Manrope
Sora
Geist
Longer lines are harder to read. Use max-w-prose or max-w-2xl.
Too many sizes create visual chaos. Stick to heading + body + caption.
Anything smaller is hard to read, especially on mobile.
Creates clear visual hierarchy. Body text should be normal weight.
Large headings look better with tracking-tight or tracking-tighter.
One well-chosen font with different weights looks professional.
These utilities change how text looks without changing the font itself. Great for emphasis, labels, and styling links.
Click here to learn more
underlineBest for: Links and clickable text
$49.99 now $29.99
line-throughBest for: Old prices, removed items
new feature
uppercaseBest for: Labels, badges, buttons
HELLO WORLD
lowercaseBest for: Normalizing user input
welcome to the app
capitalizeBest for: Titles, names, headings
Remove default link style
no-underlineBest for: Styled links and buttons
Tip: Use uppercase with tracking-wider for professional-looking labels and badges. Uppercase text looks better with extra letter spacing.
When text is too long for a card or list item, you can cut it off with an ellipsis (...) instead of letting it overflow. This keeps your layout clean.
Cuts text off at one line with "..." at the end. Perfect for titles and names.
This is a really long product title that would normally wrap to the next line and break the layout of your card component
truncateShows 2-3 lines, then cuts off. Great for descriptions and previews.
This is a longer description that spans multiple lines. It keeps going and going with more detail about the product or article. Eventually it gets cut off after two lines with an ellipsis to keep your card looking tidy and consistent.
line-clamp-2or line-clamp-3Tip: Use truncate for card titles and line-clamp-2 for card descriptions. This keeps all your cards the same height, even when content varies.
Text should be smaller on phones and bigger on desktops. Tailwind makes this easy with responsive prefixes — just add the screen size before any text class.
Hero heading example:
Build Something Amazing
text-2xlsm:text-3xlmd:text-4xllg:text-5xlSection heading example:
Getting Started with Your Project
text-lgsm:text-xlmd:text-2xlHow the prefixes work:
(none)All screens
< 640px
sm:Small+
640px+
md:Medium+
768px+
lg:Large+
1024px+
Tip: Start with the mobile size first (no prefix), then add larger sizes. This "mobile-first" approach means your site always looks good on phones, then gets better on bigger screens.
Fonts need to be downloaded before they can be displayed. Here's what you need to know to keep your site fast and looking great. Use our Font Picker to browse pairings.
The most popular way to add fonts to your website. Free, easy to use, and works everywhere. Just tell your AI tool which Google Font you want and it will set it up for you.
A single font file that contains all weights (light, regular, bold, etc.). Faster to load than downloading separate files for each weight. Most modern Google Fonts are variable.
A setting that shows a fallback font immediately while your custom font loads. Without it, visitors might see invisible text for a second or two. Always use this — your AI tool should add it by default.
Every font you add makes your site a little slower to load. Each font weight (regular, bold, italic) is a separate download. Stick to 1-2 font families with 2-3 weights each for the best balance of style and speed.
SET UP WEB FONTS
"Add [font name] from Google Fonts to my project. Use the variable font version if available. Set font-display to swap for fast loading. Only load the weights I actually need: 400 for body text and 700 for headings. Set it as the default font for the whole site."
Watch out for these common issues that make text harder to read and sites look unprofessional.
Stick to 1-2 font families. Use different weights (bold, regular, light) for variety instead of adding more fonts.
Body text should be at least 16px. Test your site on a real phone — if you have to pinch to zoom, your text is too small.
Headings should be noticeably bigger and bolder than body text. If everything looks the same size, readers can't scan the page.
Aim for 60-80 characters per line. Long lines are exhausting to read. Use max-w-prose or max-w-2xl to limit line width.
Body text needs breathing room between lines. Use leading-normal (1.5) or leading-relaxed (1.625) for comfortable reading.
Uppercase is great for short labels and badges, but terrible for paragraphs. It slows reading speed by 10-20%. Save it for small elements.
Every text element on a webpage has a specific tag. Knowing the names helps you tell AI exactly what you want.
Use only one h1 per page (the main title). h2 for major sections, h3 for sub-sections inside those. Don't skip levels.
Inline code — for technical terms or code snippets.AI Tip: "Use an h2 for the section title, an h3 for each card title, a paragraph for the description, and a bold tag for the price."
Browse Google Font pairings side by side. Find the perfect heading + body combo for your project.
Try it free →Copy-paste these prompts into your AI tool to apply what you just learned.
SET UP A TYPOGRAPHY SYSTEM
"Set up a typography system for my app using [font name] for headings and [font name] for body text. Include sizes for h1-h4, body, small text, and captions. Use consistent line heights and letter spacing."
ADD GOOGLE FONTS
"Import and apply Google Fonts to my Next.js project. Use [heading font] for all headings and [body font] for paragraph text. Make sure the fonts load efficiently and have proper fallbacks."
FIX TEXT READABILITY
"My page text is hard to read. Fix the typography: make body text at least 16px, set line height to 1.5 for paragraphs, limit line width to about 65 characters, and add clear visual hierarchy between headings and body text."