This content originally appeared on DEV Community and was authored by Jenning Ho
This article is going to cover 3 common methods to create responsive typography for your website. Responsive typography is one of the core element to a responsive website, it is about sizing your fonts as the website resizes itself. This is necessary to keep your content inline with the UI design, and that it doesn't break the layout of your website.
The 3 methods covered are namely media-queries, CSS clamp, and CSS calc. Here's a codepen that demo the 3 methods.
You may want to open the codepen in another window to play around with the viewport size (resizing the browser) to see how the content scale along the viewport, and the differences between the 3 methods.
media queries
Using media queries to scope the styling of an element is one of the most common method. You would define the styling for an element once it is past a certain size.
.block {
width: 50%;
}
@media all and (max-width: 800px) {
.block {
width: 100%;
}
}
The above code would set .block element's width to 50% once the screen is above 800px, and 100% while it is below 800px.
similarly we can use this technique to set our font sizes to our font elements.
h1.title {
font-size: 5rem;
}
@media all and (max-width: 800px) {
h1.title {
font-size: 2.5rem;
}
}
This would set .title to 5rem when screen is above 800px, and 2.5rem while below 800px.
clamp()
CSS clamp function allow you to define a range of values, ie. the minimum value, current value, and maximum value of a property. With this in mind, we can apply a responsive view unit as the current value that allows the font to size according to viewport, then set a minimum and maximum font size to keep it within an acceptable range that works with your UI design.
h1.title {
font-size: clamp(2.5rem, 8vw, 5rem);
}
This would set .title to be 8% of the width of your viewport, until 8vw is smaller than 2.5rem, then it would anchor to 2.5rem, or when 8vw is bigger than 2.5rem, it would stop growing at 5rem. This essentially means that .title will be within the range of 2.5rem and 5rem, while fluidly scaling according to the size of the viewport.
calc()
With CSS clac function you can write a formula for your element's font size. We can use a formula of a minimum absolute value plus a fluid value to create a responsive font size. ie. min + viewport size
h1.title {
font-size: calc(1rem + 4vw);
}
This would set .title to 1rem + 4% of your viewport size. In other words, .title will never be smaller than 1rem.
Conclusion
Master these 3 methods and you'll create the next perfect responsive website. They're not methods that can only apply to font-sizes of your content, but also every part of your website. Happy coding! ?
This content originally appeared on DEV Community and was authored by Jenning Ho
Jenning Ho | Sciencx (2021-05-03T15:20:13+00:00) Responsive typography. Retrieved from https://www.scien.cx/2021/05/03/responsive-typography/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.