Typography Customization
- Customize fonts and typography styles in Tailwind CSS.
Typography is not just about fonts -
it’s about readability, hierarchy, and consistency.In real projects:
Default font sizes are often not enough
Design systems require custom scales
Brands need specific typography rules
This lesson focuses on how and why to create custom font sizes in Tailwind CSS.
Why Custom Font Sizes Are Needed
Tailwind provides default font sizes like:
text-sm
text-base
text-lg
text-xl
These are great for general use, but real projects often need:
Extra-small helper text
Precise heading sizes
Brand-specific typography scale
Consistent design across large apps
Custom font sizes give you full control.
Typography as a Design System Element
In professional UI:
Font sizes are not random
They follow a scale
They stay consistent across the app
Typography communicates:
Importance
Structure
Readability
Visual rhythm
Problems with Arbitrary Font Sizes
Using random values everywhere:
text-[13px]
text-[17px]
text-[21px]
Leads to:
Inconsistency
Hard maintenance
Broken design system
Custom font size scale solves this.
What Are Custom Font Sizes ?
Custom font sizes allow you to:
Define your own text-* utilities based on your design needs.
Instead of only using Tailwind defaults, you define:
Your own names
Your own sizes
Optional line-height pairing
Where Custom Font Sizes Are Defined
Custom font sizes are defined in:
tailwind.config.js
Inside the theme.extend.fontSize section.
This keeps typography:
Centralized
Reusable
Consistent
Basic Custom Font Size Configuration
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontSize: {
xs2: '0.75rem',
sm2: '0.875rem',
base2: '1rem',
lg2: '1.125rem',
xl2: '1.25rem',
},
},
},
}
Custom Font Size Utilities
This example uses custom font size classes like text-sm2 and text-xl2 defined in Tailwind config.
<p class="text-sm2">
Small helper text
</p>
<h1 class="text-xl2">
Custom Heading
</h1>Now typography is:
Predictable
Consistent
Easy to scale
Custom Font Size with Line Height
This setup defines font sizes with corresponding line heights for better readability and typography control.
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontSize: {
body: ['1rem', '1.5'],
heading: ['1.5rem', '2rem'],
},
},
},
}
// Usage
<p class="text-body">Body text</p>
<h1 class="text-heading">Heading text</h1>Why Pairing Line Height Matters
Without proper line height:
Text feels cramped
Long content is hard to read
UI looks amateur
Professional typography always considers:
Font size + line height together.
Practical Use Cases for Custom Font Sizes
Custom font sizes are commonly used for:
Helper text
Form labels
Section headings
Dashboard numbers
Card titles
Mobile-specific text
Naming Conventions
Choose names that are:
Meaningful
Scalable
Easy to understand
Good:
text-body
text-caption
text-heading
text-display
Bad:
text-big
text-smallish
text-random
Good naming = good maintainability.
Custom Font Sizes vs Arbitrary Values
Custom Font Sizes Arbitrary Values Reusable One-off Consistent Inconsistent Design-system friendly Hard to maintain Scales well Breaks scale Rule:
Use arbitrary values only for rare exceptions.
Responsive Custom Typography
This example applies custom font sizes responsively using Tailwind breakpoints for better adaptability.
<h1 class="text-heading md:text-display">
Responsive Title
</h1>This allows:
Smaller text on mobile
Larger text on desktop
Better reading experience
Common Beginner Mistakes
Creating too many font sizes
Poor naming conventions
Mixing arbitrary values with custom scale
Ignoring line height
Inconsistent usage across components
If typography feels messy → scale is wrong.