The best way to set typographic defaults in Tailwind CSS
Wednesday, January 20, 2021 - Reading time: 10 minutes.
Have you ever wondered how to handle typographic styles with a utility-first CSS framework like Tailwind CSS? In this article I show you the best way to set your defaults and how you handle content styling from a source you don’t control like a Content Management System or a markdown file.
The best way to set typographic defaults in Tailwind CSS
Table of contents
Define the basics
Let’s start with setting the global typographic defaults for our page. So that we later can fine-tune specific elements. To follow along with this article, it’s recommended that you have a basic understanding how Tailwind CSS works.
If you are completely new to Tailwind CSS or any other utility-first CSS frameworks, this article maybe isn’t for you! But still feel free to read along.
Font Family
The first thing you must decide is what Font Family you want to use. Tailwind CSS comes with 3 predefined font stacks out of the box.
A Font Stack is a collection of related Font Families, that are most of the time used to define fallbacks on the preferred Font Family.
To apply one of Tailwind CSS default Font Stacks to your page, set the preferred class on the page body element, so every element on the page uses it.
Sans-serif
<body class="font-sans">...</body><body class="font-serif">...</body><body class="font-mono">...</body>You likely want to modify or extend the default Font Stacks to match your own brand. You can easily do this in the tailwind.config.js file, open the file in an editor and modify it to your liking.
To extend the default SanS-Serif Font Stack with the popular Roboto Font, edit the tailwind.config.js file as follow:
// tailwind.config.js
const { fontFamily } = require('tailwindcss/defaultTheme')
module.exports = {
theme: {
extend: {
fontFamily: {
...fontFamily,
'sans': ['Roboto', ui-sans-serif', 'system-ui', ...],
}
}
}
}If you don’t know how to modify your tailwind.config.js file, you can learn more about it in the excellent documentation on the Tailwind CSS website, or for now stick with the provided defaults.
Oh, and don’t forget to include a link in the head of your document to load the font.
<head>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet">
....
</head>Font Size and Font Weight
Next, it’s time to define your base Font Size and Font Weight. Tailwind CSS comes with a whole lot of font size and font weight utility classes you can use. It’s up to you what defaults you like to go with, but the following defaults work pretty good in most common cases.
<body class="font-sans font-normal font-base">...</body>And if you are looking for a little more impact, try this one.
<body class="font-sans font-medium font-lg">...</body>Like almost everything in Tailwind CSS you can modify or extend it. To be honest, I can’t remember the last time I felt the need to extend the Font Size and Font Weight defaults. They are pretty solid and based on a great typographic scale.
Line Height
Now that we defined our Font Family, Size and Weight it’s time to decided what Line Height we want to pick as our default. Tailwind CSS defines two different types of Line Heights; Relative Line Heights and Fixed Line Heights.
Fixed Line Heights are not related to the current Font Size and are useful for very precise control. For our defaults we want to go with one of the relative Line Heights. These are related to the chosen Font Size and a perfect fit for our defaults. The utility class leading-normal feels the most as the browsers default Line Height. I personally like a little more spacing between lines and chose leading-relaxed.
<body class="font-sans font-normal leading-relaxed font-base">...</body>Text color
The last thing we want to set is our Text Color. Tailwind CSS comes with many color utility classes, but you likely want to choose one from the default gray scale. What you want to choose depends on the thing you are building.
You can pick a darker gray for your text like text-gray-800 when building a light theme and lighter gray like text-gray-200 for a darker theme.
<body class="font-sans font-normal leading-relaxed text-gray-800 font-base">...</body>Now that we have our default typographic styles in place, it’s time to fine tune specific elements like our headings and buttons.
Styling Page Headings and other elements
A good way to display the hierarchy of your page is to use different font sizes, this gives people the ability to visually identify and scan your pages outline. Therefore, it makes sense to make our page headings larger than our base text, this way users can better see when a new section of our page starts.
Headings
We start with deciding how we want to style our headings. We want to achieve a few things: Increase the font size, make it bolder, decrease the line height and change the text color to a darker gray. Let’s see how we can do that with few simple utility classes.
<h1 class="font-bold leading-tight text-gray-900 font-3xl">...</h1>There you go. With four simple classes we have changed the look and feel of our H1 heading. You can now apply the same principle to other headings. Notice that you don’t have to style everything the same!
<h1 class="font-bold leading-tight text-gray-900 font-3xl">...</h1>
<h1 class="font-medium leading-tight text-blue-500 font-4xl">...</h1>
<h2 class="font-bold leading-tight text-gray-900 font-2xl">...</h2>
<h3 class="font-bold leading-tight text-gray-900 font-xl">...</h3>Hyperlinks & Buttons
Another element we want to look visually different are our hyperlinks and buttons. We can style them by the same principle as our headings.
<a href="" class="text-green-500 hover:underline">...</a>For our buttons we introduce a couple more utility classes. If you are familiar with the basics of CSS, I think that you can guess what most classes represent.
<button href="" class="inline-block px-3 py-2 text-white bg-green-500 rounded-lg">...</button>And did you figure it out? bg-green-500 sets our background color to green. text-white sets our text color to white. py-2 sets padding on the top and bottom. px-3 sets padding on the left and right. rounded-lg sets the border-radius. And inline-block makes our button behave like a inline block element.
That’s the real beauty of Tailwind CSS. If you know CSS you basically can guess what the corresponding utility classes are in Tailwind.
Set defaults for content from a CMS
Working with utility classes is great from a developer perspective but can be intimidated and cumbersome for a copywriter. You don’t want to force anybody in to including utility classes in every heading or paragraph they write.
Luckily, the creators of Tailwind CSS have came up with a solution for this. They made a plugin to set typographic defaults for content you don’t always control as a developer. Perfect for content out of a Content Management System or a markdown file.
Tailwindcss-typography Plugin
To get started with the plugin we first have to install it and also include it into our project. We can install the plugin with NPM or Yarn.
npm install @tailwindcss/typography@latest --save-devNext, we have to require the plugin in your tailwind.config.js file, and that’s basically all it takes to install the typography plugin.
// tailwind.config.js
module.exports = {
theme: {
...
},
variants: {},
plugins: [
require('@tailwindcss/typography'),
]
}By requiring the plugin, we have received a new special utility class named prose. This powerful class provides typography styles to any vanilla HTML. To use this power, all you have to do is add the prose class to an element.
<article class="prose">
<h2>This is a h2 heading, and will be styled by the prose class</h2>
<p>This paragraph tag is also styled by the prose class</p>
<ul>
<li>Even this list item</li>
<li>Cool he?</li>
</ul>
</article>Now all the content inside the article tag is nicely styled.
Change the default styling
Let’s find out how we can extend the provided style to bring the provided typography styles closer to your brand. Inside your tailwind.config.js file you have a special key for the typography plugin that you can use to provide overrides.
// tailwind.config.js
module.exports = {
theme: {
extend: {
...
typography: (theme) => ({
DEFAULT: {
css: {
color: theme('colors.gray.700'),
h2: {
color: theme('colors.gray.800'),
},
h3: {
color: theme('colors.gray.800'),
},
strong: {
color: theme('colors.gray.800'),
},
a: {
color: theme('colors.green.500'),
'&:hover': {
color: theme('colors.green.600')
},
},
},
},
})
}
},
variants: {},
plugins: [
require('@tailwindcss/typography'),
]
}Don’t get intimidated by this code snippet. It’s seems more complicated than it really is. Let’s break it down in a few simple steps. First, we include Tailwinds default theme utilities, this way we can for example easily reference the colors.
// tailwind.config.js
module.exports = {
theme: {
extend: {
...
typography: (theme) => ({
DEFAULT: {
css: {
...
},
},
})
}
},
}We start with setting our text color for all the content inside our prose utility class. The text color should be a medium gray (gray 700).
// tailwind.config.js
typography: (theme) => ({
DEFAULT: {
css: {
color: theme('colors.gray.700'),
},
},
})Now that we defined our base color, the next thing is to fine tune elements like h2, h3 and our strong tags. For all those tags we go with a slightly darker gray (gray 800). This way our headings are getting a little more impact.
// tailwind.config.js
typography: (theme) => ({
DEFAULT: {
css: {
...
h2: {
color: theme('colors.gray.800'),
},
h3: {
color: theme('colors.gray.800'),
},
strong: {
color: theme('colors.gray.800'),
},
},
},
})The last thing that we change are our text link colors. Notice how we can also style the links hover look and feel.
// tailwind.config.js
typography: (theme) => ({
DEFAULT: {
css: {
.....
a: {
color: theme('colors.green.500'),
'&:hover': {
color: theme('colors.green.600')
},
},
},
},
})The official Tailwindcss-typography Plugin comes with many more styling options. Most of the time I only find myself fine tuning the Font Size, Color and Weights. But you can also control things like the Line Heights, Margins and Paddings. It’s totally up to you how much you want to customize.
When to use Prose and when not
You probably are now wondering when you use prose to style your content and when do manually style your content with other utility classes like text-xl, text-gray-800 etc.
In general, I would advise to only use prose to style the content from a blog, long article or a product description. For the styling of all other elements, I prefer to use the other utility classes, because it gives you more fine control over your styling. That’s just my opinion, feel free to agree or disagree.
Different typographic defaults for mobile
Finally, we take a look how you can apply different typographic defaults for mobile devices. Every utility class in Tailwind can be applied conditionally at different breakpoints.
Which makes it a piece of cake to apply different typographic defaults for mobile.
Say that we want our content and headings on mobile a little smaller. This way we can fit more content on the screen and it also provides a better User Experience. Let’s start with modifying our body utility classes.
Responsive body classes
<body class="font-sans font-normal leading-normal text-gray-800 font-sm md:font-base md:leading-relaxed">...</body>Breakpoints in Tailwind CSS are built on the mobile first principle. This means that we start with defining our typographic defaults for mobile and then fine tune them for larger screens.
In the example above you can see this principle in action. Notice the following classes font-sm, md:font-base, leading-normal and md:leading-relaxed.
This translate to a smaller Font Size and Line Height on mobile and on the breakpoint md (768px) the Font Size is set back to our original preferred defaults.
Responsive headings and CMS content
To finish off, we make our typographic heading styles and CMS content more suitable for our mobile users.
<h1 class="font-bold leading-tight text-gray-900 font-xl md:font-2xl lg:font-3xl">...</h1>In the example above, you see three classes to control our Font Size (font-xl, md:font-2xl and lg:font-3xl). In this case I choose to introduce an extra increase in the Font Size on the lg breakpoint. Now that our heading styles are in place, we only have to fine tune our CMS content.
<article class="prose md:prose-lg">...</article>It’s completely up to you how many control and fine tuning you need. My advice is to be cautious with micro-managing Font Sizes and other details to much. First make sure that you got your basics in place and then fill your website with actual content. With your content in place, scan the page and look for any irregularities and fine tune them accordingly.
Conclusion
Getting typographic styles right is difficult and a time-consuming job. With Tailwind CSS in combination with the official Typography Plugin you have a real timesaver on your hands.
Most common typographic cases are covered by default and leaves you with plenty time to fine tune it to your liking.
If you enjoyed this article, please consider subscribing to our Tailwind CSS Newsletter. I will send you a emailwith our best articles. Tips, news, updates, snippets and all the best freebies, all yours, every month!