Relative Fonts (The Liquid State)
In context of web pages,HTML and CSS, “font-size” is a very basic property, which defines the size or height of text on web browser.
It is certainly not a point of discussion, but the “Liquid state” of it definitely is!
What is a Relative Font:
As defined above it is the fluid state of a font. Before understanding this , we need to go through the static state of a font.
Static Fonts : Fonts with values as px(pixel),in(inches) , pt(points), xx-small,x-small,medium,large,x-large,xx-large are static or absolute size of fonts.
Absolute font size of an element depends only on the defined size(e.g 16px), irrespective of what is given in body or parent.
Relative Fonts : Unlike the static fonts, relative font sizes depends on the font size value of body as well as their parent element.
Units for the relative fonts are: percent(%),em,rem,vh or vw.
Why should we care about Relative fonts:
A very obvious question can come in the mind, who is building the web architecture.
Well, we have to! Especially when we are building a website for multiple resolutions.
Consider writing specific font size for each element on every different resolution. Irritated, right?
Defining relative font in our styles sheet, can solve this absolutely.
How to use a relative font:
We generally define a basic font size in body as static fonts.
For example:
body
{ font-size:100%; }
It renders the 100% font size of your default browser, that is generally 16px in static terms or 1em.
Quick Formula(px to em conversion):
Ideally,
1em of 100% = 16px ;
1em of 62.5% = 10px ;
So at 62.5% in body Xpx = X/10 em,
like 12px of 62.5% = 1.2 em ;
We take 62.5% font-size in body for easy calculation.
The Em bug :
When em is used in inheritance , it creates a bug of increasing font size in child element.
Example:
div1 {font-size : 2em} and div1 > p {font-size : 1.2em}, the actual font size of div1 > p will be 2em+1.2em = 3.2em.
To remove this bug we use either static font size in child element like px,pt or use rem or percent.
Rem(Rootem) calculates the font size directly from body.
There are much more relative font sizes are in trend like Vh,Vw and more.
Keep decorating your Webpage,Happy Coding!
