What is Font Size and How to use it?
Last updated on October 12, 2022
If you’re using the laptop, on your screen you can see text and letters which some are large and some small. Similarly, on non-digital stuff like papers, billboard we see large and small text. This text measurement depends on the size and this size is called font size.
Pick the correct font size for your web design is an essential thing. Typography can make your design beautiful and can destroy your beautiful web design. choosing one font size for all platforms and content types does not make sense.
So, you need to choose a good font size to increase the readability of your content you are going to reduce your bounce rate and increase user loyalty to the website. People spend less time on the websites if the font size is not good as per device size.
The font size also impacts on content’s hierarchy, the font of the menu or navigation can make it easier to navigate through the website.
Absolute Font Sizes
Pixels (px): are an absolute size of fonts and cannot automatically adjust as per device width.
Points (pt): point size is normally used for print, Points are based on an Inch on a ruler. 72 Points are equal to 1 Inch.
Relative fonts sizes measurements
Percentage (%)
Percentage units are always relative to other elements for example an element’s length is relative to the parent element’s length so the percentage value will depend on available space.
Viewport width or height (vw or vh)
As per the viewport width and height fonts adjust themself.
em:
The font size is relative to the parent container’s font size.
Root em (rem):
The font size inherits from the root of the styling.
The primary historical reason to use the relative font sizes when the browser zooms the font sizes adjust themselves automatically according to the device width and zoom.
The second thing it that users with bad eyesight can still read the content. Every major browser can scale the font sizes properly except the IE6 which is very old and people are not using it I guess.
But now many modern browsers can scale absolute font sizes because many relative font sizes have some drawback.
Relative font sizes are required to keep a strong focus on it when working for different devices because on some devices it can create issues.
Relative font sizes can make fonts blurry and result in fractions many times depending on browsers and operating system.
Absolute font sizes solve the problem and great work on all modern browsers only when you need to reduce the font sizes you can use media queries to set them accordingly if you are using absolute font sizes.
Unit for Font Size
I use the media queries break-points to set the minimum and maximum font scale for different text like body, and heading sub-heading, and forms input on different widths of devices depending on the layout and sometimes have to use the absolute fonts but some we have to use the relative font size.
Also, you can use the clamps(minimum size, preferred size, max size) CSS method for font size it will handle relative fonts as per available space.
Related Posts