As we mentioned at the start of our previous post Override a core Beaver Builder module to create a unique Blog Post Layout, typography can directly affect how easily your information is digested by your readers. Because of this, you need to ensure you implement responsive font sizes in your WordPress website to allow optimum reading of your website content.
Just like the below animation shows. Mobile devices and Desktop devices need to have different typographic like font sizes and line height to ensure the content is easy to read.
You don’t want to sweat out writing your content and then not have anyone read it.
All you need to do is alter your typography responsively to do a couple of simple things that’ll go along way to getting more content on your blog read.
- You want to ensure your character count per line is between the optimum range of 50-75 characters long.
- You want to ensure the size of your font is large enough to read.
- You want your text colours to contrast with the background color (white on black is best).
- You want to ensure there is enough contrast between your different heading sizes to ensure people scanning your content (i.e. nearly 100% of readers) can find the information that’ll hook them into your post.
The list goes on but these 4 simple things will significantly increase the ability for people to read your content.
Typography is a very powerful thing and one of the best things I ever learnt at uni. And by learnt, I mean studied. For a full year. Type is serious stuff.
So, in terms of how you can best work with the type in your website, we go for the mobile-first approach. Why? Because the internet has changed and mobile devices are taking over. You need to optimize for website for smaller devices.
Here’s how we do it at BeyondBeaver.com and recommend you do it to.
NOTE! The below CSS we add in this tutorial will work with the Beaver Builder Theme but it may not work with all themes as some theme’s CSS may override the CSS below. You just need to tweak the CSS to work with your theme. The logic of this tutorial can, however, be applied to any theme.
Responsive font sizes in your WordPress website
Firstly, here at BeyondBeaver.com use the Beaver Builder Theme. It allows you to set typographic settings through the Customizer by logging into your WordPress Dashboard > Appearance > Customize.
Now, we use the WordPress Customizer settings to set the font sizes for small devices (i.e. mobile phones), as per below.
As you can see below, with the Beaver Builder Theme you have the option of setting the size of the font, the line height and the letter spacing.
Below is a screenshot of setting your paragraphs but the settings are the same for all Headings, also.
Notice how you can’t change the font size between mobile, tablets and desktops?
We can’t adjust the font size as we move up devices.
That limitation is very annoying as it sort of inadvertently promotes bad typography.
To show this, in the screenshot above the font is quite small on larger desktop devices and there’s a lot of characters per line which makes reading more difficult.
But it is the perfect size for mobile phones and smaller devices, as shown below.
So, as mentioned, the above typography settings we set in the customizer by logging into your WordPress Dashboard > Appearance > Customize we use for the smaller (mobile devices).
Moving up, the next devices we want to target are medium devices (tablets or there abouts and up) and larger devices (desktops).
To do this we use a CSS media query and the min-width variable, as per below. You can change the min-width:992px to your own value.
NOTE: Add this CSS to wherever you normally add your CSS. We recommend your theme’s style.css file but you may have somewhere else you place your CSS in your theme.
And below you can see how much better this one small CSS change makes our typography across responsive devices.
At the start of the animation, the font size of text and headings is larger so there are less characters per line to fit into our optimum character count per line range of 50-70 characters.
As the window is scaled down to smaller devices, the font resizes to allow better reading on smaller devices.
Wrapping it up
This is a very simple technique and, although we have shown you how this works with the Beaver Builder Theme, you can use this with logic with any WordPress theme.
You can also update the above CSS to change the line-height for larger devices so that there is a larger gap between lines of text to allow easier reading.
Please leave a comment below if you implement this technique or have any questions on this post.