In context of web pages,HTML and CSS, \u201cfont-size\u201d is a very basic property, which defines the size or height of text on web browser.<\/p>\n
It is certainly not a point of discussion, but the \u201cLiquid state\u201d of it definitely is!<\/p>\n
What is a Relative Font:<\/strong><\/p>\n 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.<\/p>\n Static Fonts :<\/strong> 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.<\/p>\n Absolute font size of an element depends only on the defined size(e.g 16px), irrespective of what is given in body or parent.<\/p>\n Relative Fonts :<\/strong> Unlike the static fonts, relative font sizes depends on the font size value of body as well as their parent element.<\/p>\n Units for the relative fonts are: percent(%),em,rem,vh or vw.<\/p>\n Why should we care about Relative fonts:<\/strong><\/p>\n A very obvious question can come in the mind, who is building the web architecture.<\/p>\n Well, we have to! Especially when we are building a website for multiple resolutions. Defining relative font in our styles sheet, can solve this absolutely.<\/p>\n How to use a relative font:<\/strong><\/p>\n We generally define a basic font size in body as static fonts.<\/p>\n For example:<\/p>\n It renders the 100% font size of your default browser, that is generally 16px in static terms or 1em.<\/p>\n Quick Formula(px to em conversion):<\/p>\n Ideally,<\/strong><\/p>\n 1em of 100% = 16px ;<\/span><\/p>\n 1em of 62.5% = 10px ;<\/span><\/p>\n So at 62.5% in body Xpx = X\/10 em,<\/span><\/p>\n like 12px of 62.5% = 1.2 em ;<\/span><\/p>\n We take 62.5% font-size in body for easy calculation.<\/p>\n The Em bug :<\/strong><\/p>\n When em is used in inheritance , it creates a bug of increasing font size in child element.<\/p>\n Example:<\/strong><\/p>\n To remove this bug we use either static font size in child element like px,pt or use rem or percent.<\/p>\n Rem(Rootem)<\/strong> calculates the font size directly from body.<\/p>\n There are much more relative font sizes are in trend like Vh,Vw and more.<\/p>\n Keep decorating your Webpage,Happy Coding!<\/p>\n","protected":false},"excerpt":{"rendered":" In context of web pages,HTML and CSS, \u201cfont-size\u201d 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 \u201cLiquid state\u201d of it definitely is! What is a Relative Font: As defined above it is the fluid state of a […]<\/p>\n","protected":false},"author":904,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":2},"categories":[1],"tags":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/38358"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/904"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=38358"}],"version-history":[{"count":0,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/38358\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=38358"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=38358"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=38358"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\nConsider writing specific font size for each element on every different resolution. Irritated, right?<\/p>\nbody
\n{ font-size:100%; }<\/code><\/p>\ndiv1 {font-size : 2em} and div1 > p {font-size : 1.2em}<\/code>, the actual font size of div1 > p<\/strong> will be 2em+1.2em = 3.2em<\/strong>.<\/p>\n