{"id":38358,"date":"2016-07-28T12:48:27","date_gmt":"2016-07-28T07:18:27","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=38358"},"modified":"2016-07-30T06:05:14","modified_gmt":"2016-07-30T00:35:14","slug":"relative-fonts-the-liquid-state","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/relative-fonts-the-liquid-state\/","title":{"rendered":"Relative Fonts (The Liquid State)"},"content":{"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.<\/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.
\nConsider writing specific font size for each element on every different resolution. Irritated, right?<\/p>\n

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

body
\n{ font-size:100%; }<\/code><\/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

div1 {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

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":5,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-38358","post","type-post","status-publish","format-standard","hentry","category-technology"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t