Responsive Font Design
Hello there, thank you for tuning in. I would like to talk about responsive font or text within your project. It’s one thing to just give your font a pixel size and call it a day. This may work for your project or you may end adding several breakpoints to make it more of a responsive design. This can prove to be quite a hassle, so let’s take a look at some other options, that could help us flex our text.
Let me start with a quick recap on what we use on a typical basis. It’s important to keep in mind two things, that it’s always wise to assign a default/fallback font size, and that most of the examples we see here can be applied to more than just text. We have different tags, that have different size attributes to them, but as we know this is based on the default font size of the browser or the font size given to the body. The main downfall with using pixels as our font-size is that if the user changes the font size of their browser’s setting, they are stuck using the font size we gave them in pixels. Once more, we can have multiple font tags and a default body font size, but once you change the font size of the individual tags, it’s clear that an h6 looks just like an h1. Even the p tag looks the same as the h tags, minus the font-weight. Before I move on, I’d like to note that one cool thing we can do with this, is giving the section or div a percentage itself. This will add some responsiveness to your text.
First up we have vw (view width) and vh view height). There is also vi and vb, which are 1% of the viewport size in the direction of the root element’s inline or block axis. These are all based on a percentage of the windows width and the height of the window, but we will only focus on vh and vw:
1vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, whichever is smaller
1vmax = 1vw or 1vh, whichever is larger
This font size is extremely responsive and will grow and shrink with the size of your screen. In fact, it may be a little too responsive as, you might find the text too small on mobile devices or the web, depending on what you build for first. Thus you might end up creating a breakpoint to readjust these in the end. While this style has been widely adopted and used in most browsers, some mobile devices have trouble using view height, or just don’t support it at all.
Next up we have Rem which is a web unit, that is in a sense a multiplier. We have to accept that multiple users interact with your site in different ways based on personal tastes. Some users enjoy smaller or larger fonts and some people need them. Rem comes into play here by, in a typical case, one Rem resembles 16pixels, but in the long run, Rem is recalculated based on the font size of the users’ browser settings. So 5 rems would be 5 times the default font size. These are not absolute and are relative to the users’ preferences.
Next up we have Em. Which again is a relative font size based on other font sizes. The big difference here is that em is based on its parent components font size. While this is very useful, especially if you want to scale children to their parents, but using em can be problematic when nesting becomes too in-depth or the nest isn’t clear due to leveled nesting.
Last but not least is the percentages. While vw, vh, rem, and em, are percentage-based in their own accord, and if you choose, you can just use percentages throughout the board as well. One adjustment we can make here is by setting the default font size to a percentage in the Html, then base your rems and ems off that percentage. This has proven to make very responsive text throughout multiple browsers.
There are other ways to size your fonts, but a majority of them refer to the type of font family that you are using. All in all these font-size adjusters listed above, are all that you really need in your tool kit to make responsive text for web and mobile design in one. I hope you enjoyed the read.
