When I teach WordPress one of the first things I teach is responsive typography. Why? Because it’s a simple thing you can do that makes a huge difference to your design and user experience.
If you are thinking “WTF is ‘responsive’?”. Responsive means it looks good on any screen whether it’s a phone, tablet, or computer.
Websites that aren’t responsive do my head in, and whilst some designers or site owners might like their font choice of teeny tiny text and think it looks good, it doesn’t, it’s just annoying. Like most people, if a site is hard to read or a mess on my phone, I leave the site and go to another site. The internet is full of other sites to look at so why stay on one that sux?
Information on a website needs to be readable and look good on all devices and as there are 100s if not thousands of different device sizes, it’s a little tricky without responsive design.
Responsive Typography it’s the secret sauce to making your website’s text look amazing on any screen size.
I am going to walk you through the essentials of responsive typography; It’s not that hard, it’s just different. Often it’s not explained well so the concept can seem confusing but it’s awesome once you get the hang of it. I am hoping to show you how to ditch the pixels and embrace REM.
Pixels Just Don’t Cut It Anymore
I have said in past blogs that building a website is like baking a cake or building a house. For this blog, we are going back to cake.
When you bake a cake, you follow a recipe and it has measurements in “cups.” What if you only have a teaspoon? Disaster, right? Pixels are like that “cup” measurement – fixed and inflexible. 1 cup is always 1 cup. 16 pixels is always 16 pixels.
But 1 screen size is not always 1 screen size, so why would you want the same size on all those devices?
You can swap your view when you are designing a webpage between desktop, tablet and mobile, but there are 100s of screen sizes for each of those. My Samsung Note has a different screen to my mum’s iPhone.
When you use pixels for font sizes, your text might look perfect on your computer, but it could look terrible on other devices, and that loses you customers.
REM to the Rescue!
“Rem” stands for “root em.” It’s a flexible and powerful unit that scales your font sizes relative to the root font size of your website. Usually, your base font size is 16 pixels. This is like the foundation of your typography.
1 REM equals that base font size. So, if your base font size is 16 pixels, then 2 rem would be 32 pixels, 1.5 rem would be 24 pixels, and so on.
To convert pixels to rems, just divide the pixel value by 16. So 20px / 16 = 1.25rem, 32px/16 = 2rem and so on.
So why not just use pixels if REM is based on pixels?
Whilst it may seem like a waste of time to flaff about with REM conversions when 1 REM is 16 pixels but it’s a foundational thing with a bit of future proofing + it keeps things tidy.
Future changes: Even if your base font size is 16px right now, you might fancy changing it down the track. If you’ve used REMs in your CSS, all your font sizes will adjust nicely, like a well-oiled machine. This saves you the hassle of going through and changing every single font size by hand.
Global control: REMs give you a central point of control for your typography. By changing the base font size in one spot (usually the <html> element), you can scale the entire website’s typography without breaking a sweat. This is a lifesaver for big websites or when you’re tweaking the design.
User Accessibility and Browser settings: Lots of people adjust their browser’s default font size to make things easier to read. REMs respect these choices, so your text stays readable even if someone has bumped up their default font size. Rems Care, Pixels are rude and don’t haha
Proportional scaling: You might still need to tweak font sizes for different devices with media queries, but REMs still have their advantages. When you change font size in a media query using REMs, it scales proportionally to your base font size. This keeps things consistent and makes it easier to fine-tune the typography for different screens.
Modern Best Practice REMs are the go-to for web typography these days. Using them shows you’re on top of your game and creating a website that’s accessible and easy to maintain. If you are a pixel person, you look a little old school (sorry haha)
It might seem like a bit of a pain in the ass to convert pixels to REMs at first, but it’ll save you a lot of headaches in the long run.
With REM you’ll have a more scalable, accessible, and maintainable website.
Kadence has Clamp() Magic!
Now you get the whole REM thing, let’s talk about something that I love in Kadence Theme, CSS clamp ().
Clamp() helps make sure your text sizes look great on all devices. Clamp() allows Kadence to set a minimum font size (so the text is never too small to read), a maximum font size (so it doesn’t get too big), and a way for the font size to change smoothly in between as the screen size changes.
Your test should always be pretty close to the perfect size, no matter what device someone is using.
Kadence makes it easy with their built-in options, so you don’t need to code in your clamp values (unless you want to)
Check out this demo of Clamp: Developer.mozilla.org
Choosing a Font Size (From Small to Extra-Extra-Extra Large!)
By using the Kadence Advanced Text block the font sizes aren’t fixed; they’ll adjust depending on the screen size.
- SM (Small): Tiny text, great for captions or fine print. This will scale dynamically between 0.8rem and 0.9rem depending on the screen size.
- MD (Medium): Your everyday text size, perfect for paragraphs. This will scale dynamically between 1.1rem and 1.25rem.
- LG (Large): Headings, subheadings, or text you want to stand out. This will scale dynamically between 1.75rem and 2rem.
- XL (Extra Large): Bigger headings or key phrases. This will scale dynamically between 2.25rem and 3rem.
- XXL (Extra-Extra Large): For really big, attention-grabbing text. This will scale dynamically between 2.5rem and 4rem.
- XXXL (Extra-Extra-Extra Large): The biggest of the big! This will scale dynamically between 2.75rem and a whopping 6rem.
Create some breathing room with Line Height, Margins or Padding
Kadence gives you easy ways to control the space around your text using padding and margins. Padding is the the space inside a box and margins as the space outside the box.
Kadence has these sizes for these too:
- None: No padding or margin.
- XXS (Extra-Extra Small): A tiny bit of space.
- XS (Extra Small): A little more space.
- SM (Small):
- And so on, up to 5XL (Extra-Extra-Extra-Extra-Extra Large!).
Just like with text sizes, choose the padding and margin sizes that look best for your design.
Custom Values
Kadence gives us fine-grained control by the use custom of sizes for text, padding, and margins too.
- PX (Pixels): I avoid these for typography because they’re not responsive but they can still be handy for setting fixed spacing.
- EM: This unit defines sizes relative to the font size of the parent element. I like to use em for line height and button padding, as it keeps the spacing proportional to the text inside the element.
- % (Percentage): Similar to em, percentages offer flexibility, but they are a little quirky and % seems like a little bit of a lie as % is calculated based on the width of the parent element, not the height. I like % for container padding as they adapt smoothly to different screen sizes. Personally I have found % to be a little flaky. I use REM for padding and margins.
- VH and VW: These units are a bit more advanced. VH stands for “viewport height,” and VW stands for “viewport width.” They let you define sizes relative to the browser window’s dimensions, which can be handy for creating elements that scale dynamically with the screen size.
In the page editor, Kadence has preview tools so you can see how your text looks on phones, tablets, and desktops. I use this to double-check things look fine before I save the page.
Beyond Font Sizes: Line Height and Letter Spacing
While font size is crucial, don’t forget about line height and letter spacing. These subtle adjustments can significantly impact readability:
- Line height controls the space between lines of text. My goto is 1.2EM but sometimes you need more space so 1.5EM does the job.
- Letter spacing adjusts the space between individual letters. I use EM here too if I want to add some space.
Responsive Typography Best Practices
Using rem and em is a great start, but here are some additional tips for creating truly responsive typography:
Line Height and Letter Spacing
Don’t forget about line height and letter spacing! These are crucial for readability. As your font sizes scale, make sure your line height and letter spacing adjust accordingly. A good starting point for line height is around 1.5 to 2 times your font size. Tweak letter spacing for optimal legibility, especially at larger sizes.
Font Scaling Techniques
For more advanced control, check out CSS functions like clamp(). clamp() allows you to set minimum, preferred, and maximum font sizes, giving you fine-grained control over how your text scales across different screen sizes. This is a great way to achieve fluid typography.
H1 (font-size: clamp(2rem, 5vw, 4rem);
Web Fonts and Performance
If you’re using web fonts, optimise them for performance. Large font files can slow down your website. Consider using font subsets, preloading critical fonts, and exploring variable fonts to keep your website loading quickly.
Accessibility Matters
Responsive typography is essential for accessibility. By using relative units, you allow users to control their default font size, which is critical for people with visual impairments. Always ensure sufficient contrast between text and background colours.
Beyond rem and em: Viewport Units (vw, vh)
While rem and em are your bread and butter, viewport units like vw and vh can be useful for certain situations. These units are relative to the user’s browser window size. For example, you might use vw for a hero heading to make it scale with the screen width. However, be cautious with viewport units, as they can sometimes lead to unexpected results on very large or small screens.
Go Forth and Conquer Responsive Typography!
You’ve now got the knowledge to create beautifully responsive typography and Kadence.
Remember to test your website on different devices to ensure it looks fantastic everywhere. Happy designing!
More About Clamp…
The CSS clamp() function
clamp() allows you to set a minimum, preferred, and maximum font size for an element. This means your text will scale smoothly between those limits as the screen size changes. It’s like REM but better!
- Understanding the Syntax: clamp(MIN, IDEAL, MAX) takes three values:
- MIN: The smallest acceptable font size. This ensures your text is never too small to read, even on tiny screens.
- IDEAL: Your preferred or ideal font size for the element. This is the size the browser will try to use if there’s enough space.
- MAX: The largest acceptable font size. This prevents your text from becoming overwhelmingly large on huge screens.
- How clamp() Calculates: The browser uses a formula to determine the actual font size:
- If IDEAL is smaller than MIN, the font size will be MIN.
- If IDEAL is larger than MAX, the font size will be MAX.
- Otherwise, the font size will be IDEAL.
- Visualising clamp(): Imagine a graph where the x-axis represents the screen size and the y-axis represents the font size. clamp() creates a line that starts at MIN, slopes up towards IDEAL, and then levels off at MAX. This ensures smooth and controlled scaling.
In Kadence you will see clamp() used with CSS variables, like this:
h2 { font-size: clamp(var(–global-sm), 2.5rem, var(–global-lg)); }
This tells the browser:
- Minimum: Use the font size defined by the –global-sm variable (which might be something like 1.5rem for small screens).
- Preferred: Try to use 2.5rem as the font size.
- Maximum: Don’t let the font size exceed the value in the –global-lg variable (perhaps 4rem for very large screens).
Why Kadence Uses CSS Variables
Kadence WP cleverly uses CSS variables (also known as custom properties) within its clamp() functions. These variables, like –global-sm and –global-lg, define font sizes for different screen size ranges. This makes it super easy to manage your typography across your entire website.
Advanced clamp() Techniques
- Viewport units: You can combine clamp() with viewport units (vw, vh) for even more dynamic scaling. For example: clamp(1rem, 4vw, 3rem) would create a font size that scales between 1rem and 3rem based on the viewport width.
- Calculations within clamp(): You can even perform calculations within the clamp() function. For example: clamp(1rem, 1rem + 2vw, 3rem) adds 2% of the viewport width to the ideal font size.
Kadence Blocks and clamp()
Many Kadence WP blocks (like headings, paragraphs, and buttons) have built-in clamp() functions for their typography. You can often customise these within the block settings in the Kadence editor. This allows you to fine-tune the responsive behaviour of individual elements.
Developer Tips for Kadence WP
- Child themes: For more extensive customisation, create a child theme for your Kadence WP website. This allows you to safely modify CSS variables and clamp() functions without affecting the core theme files.
- Inspect with developer tools: Use your browser’s developer tools to inspect Kadence elements and see how clamp() and CSS variables are being applied. This can help you understand the underlying structure and make precise adjustments.
Kadence Responsive Sizing System
Kadence WP takes responsive typography a step further with its predefined size variables. These variables provide a consistent and scalable system for spacing and sizing elements throughout your website.
Spacing Variables
Kadence WP has a set of CSS variables that represent common size labels (XS, Small, Medium, etc.) for spacing elements. These variables hold specific rem values, such as:
| Size Label | rem Value | Pixel Equivalent (with the base font size of 16px) |
| –global-padding-xs | 0.25rem | 4px |
| –global-padding-sm | 0.5rem | 8px |
| –global-padding-md | 1rem | 16px |
| –global-padding-lg | 1.5rem | 24px |
| –global-padding-xl | 2rem | 32px |
| … | … | … |
Kadence Typography Sizes
Kadence WP also defines font size variables using a similar naming convention:
| Variable | Font Size | Clamp() Value |
|---|---|---|
| –global-kb-font-size-sm | SM (Small) | clamp(0.8rem, 0.73rem + 0.217vw, 0.9rem) |
| –global-kb-font-size-md | MD (Medium) | clamp(1.1rem, 0.995rem + 0.326vw, 1.25rem) |
| –global-kb-font-size-lg | LG (Large) | clamp(1.75rem, 1.576rem + 0.543vw, 2rem) |
| –global-kb-font-size-xl | XL (Extra Large) | clamp(2.25rem, 1.728rem + 1.63vw, 3rem) |
| –global-kb-font-size-xxl | XXL (Extra-Extra Large) | clamp(2.5rem, 1.456rem + 3.26vw, 4rem) |
| –global-kb-font-size-xxxl | XXXL (Extra-Extra-Extra Large) | clamp(2.75rem, 0.489rem + 7.065vw, 6rem) |
These variables are used in the theme customiser, block settings, and Kadence Elements to provide consistent and responsive font sizing.
Benefits of Kadence’s Sizing System:
- Consistency: Ensures consistent spacing and sizing across your website.
- Ease of use: Makes it intuitive to adjust spacing and font sizes without needing to remember specific rem values.
- Maintainability: If you want to change a size site-wide, you just need to update the corresponding variable in one place.
- Flexibility: You can still use custom rem or pixel values if you need more precise control.
Connecting to clamp():
Kadence often combines these size variables with the clamp() function for fluid responsive spacing and font sizing.
This approach provides:
- Fluid scaling: Text smoothly adjusts between size limits for a polished look.
- Readability: Ensures text is never too small or too large, regardless of the screen size.
- Maintainability: Kadence WP often uses global CSS variables, making it easy to update font sizes across your entire site at once.
With Kadence you can also add custom CSS directly in the theme customiser.
This makes it super easy to implement these changes without any coding hassle!