In the world of responsive typography web development, there have been many changes to how we use CSS styling to make websites responsive. The main tool used is called a media query and even the way we use it has changed since it became a recommended standard in 2012. Now there is also an increasingly popular player in how we set the font-sizes for our website’s typography. This new way to size promises to make websites responsive with more screens and with less reliance on our current (slightly) limited use of media queries.
But First, How Do Media Queries Work?
Media queries allow us to change the settings for every component of an HTML file. With this tool, we can change not only the font-sizes of a paragraph but also the width/height/padding/margin/etc. of the container it lives in – we can even completely hide items we deem unnecessary.
The first, and most commonly applied philosophy has been to set media queries using the popular (aka standard) used viewport sizes in our techy devices. However, there is also an increasingly popular school of thought that the sizes should be based on the breakpoint of your individual web pages. Whichever method is chosen, the setting is pretty similar; for example, if we wanted to set the overall and header font sizes to be smaller on screens smaller than 420px it would look something like this:
Browsers then read this styling and change the sizes accordingly to fit better in the smaller screens.
What Can Be Done Differently?
The new(ish) way to resize font-sizes is to make the overall typography “fluid.” Instead of static breaks created in the media queries, developers can set a base size that uses the screen size to determine how big text should be.
How Can This Be Done?
Most people are familiar with a pixel unit of measure, but this fluid method utilizes viewport units of measure instead:
- vw: viewport width
- vh: viewport height
- vmin: the smallest value for viewport’s width or height
- vmax : the largest value for viewport’s width or height
When a browser reads the value set for vw it then applies that as a percentage of the screen’s size. For instance, if we set the body font-size to 2vw, what shows on the screen is fonts that are 2% the size of the width of the screen currently being used. So regardless of the screen size (and without media queries), all visitors will see a base font that is 2% of their screen.
This Sounds Too Good To Be True
Well, what can I say? When you’re right, you’re right. The biggest issue with fluid typography comes along with the extreme end of sizes; in the smallest, the fonts become so small they are unreadable and in the largest, they are so large they affect the UX. So how do we fix this? Here is where a little math and some good ole breakpoint media queries come to the rescue. The first step is figuring out what sizes should be used as breakpoints, and then we set a static size for those ends of the screen spectrum. Thanks to Michael Riethmueller we know that this simple formula will help us get those numbers:
default font-size ÷ (viewport unit ÷ 100)
If you wanted to have all small screens to show a default font-size of 14px and on other screens to show a 2vw font the math would look like this:
14px ÷ (2 ÷ 100) = 700px
Similarly, the formula would be applied to find the larger end of the spectrum and a static font size would be set for those larger screens.
Why Should I Use This?
When viewport sizes are used in conjunction with ems units for items such as margin, padding, etc. the result is a web page that “scales” as needed instead of jaggedly jumping from size to size. The result does not only reduce the number of media queries written (can we say faster loading CSS?) but also creates a smoother transition from screen to screen.
If you want to get really fancy there is a way to get rid of media queries completely but I’ve already used a lot of math so I will save it for another time.