CSS - Relative Sizing (Length)

Relative Sizing is when you are using a length units that is relative to another length property.

Style sheets that use relative units will more easily scale from one medium to another (e.g., from a computer display to a laser printer).

With font-size

• The base size is set on the body with a value of 15 pixel

body {
  font-size: 15px;
}

• Every p.x element will show x times the size of its body parent

p.base1 { font-size: 1em } /* ie 1em = 1 * 15px = 15 px */
p.base2 { font-size: 2em } /* ie 2em = 2 * 15px = 30 px */

• The html code

<p class="base1">15px text</p>
<p class="base2">30px text</p>

• Output:

The base size is generally set on the body

Example with the font-size:

body {
  font-size: 15px;
}

Relative units are:

• em: the font-size of the element (of its parent)
• rem: font size of the root element of the document.
• ex: the 'x-height' of the relevant font
• px: logical pixels, relative to the viewing device
• %: percentage from another value
• sizes relative to the reader's window:
  • vw : 1/100th of the viewport's width
  • vh. 1/100th of the viewport's height.
  • vmin the smallest of vw and vh.
  • vmax the greatest of vw and vh

Example:

h1 { margin: 0.5em }      /* em */
h1 { margin: 1ex }        /* ex */
p  { font-size: 12px }    /* px */

The emphemeral unit (em) is relative to the current font size and specify the number of characters.

ie 10em = 10 characters.

More CSS - Emphemeral unit (em | equal M)

rem is the font size of the root element of the document.

The 'ex' unit is defined by the element's first available font. The 'x-height' is so called because it is often equal to the height of the lowercase “x”. However, an 'ex' is defined even for fonts that don't contain an “x”.

The x-height of a font can be found in different ways. Some fonts contain reliable metrics for the x-height. If reliable font metrics are not available, UAs may determine the x-height from the height of a lowercase glyph. One possible heuristics is to look at how far the glyph for the lowercase “o” extends below the baseline, and subtract that value from the top of its bounding box. In the cases where it is impossible or impractical to determine the x-height, a value of 0.5em should be used.

Example(s):

h1 { line-height: 1.2em }

h1 { font-size: 1.2em }

When specified for the root of the document tree (e.g., “HTML” in HTML), 'em' and 'ex' refer to the property's initial value.

Pixel units are relative to the resolution of the viewing device, i.e., most often a computer display.

CSS - Percentage Value - each element defines to which the percentage refers

vw is 1/100th the viewport width.

vh is 1/100th of the viewport height

vmin is the smallest of vw and vh.

vmax is the greatest of vw and vh.

Child elements do not inherit the relative values specified for their parent; they inherit the How to get the CSS computed style values of an HTML element|computed values]].

Example(s):

In the following rules, the computed 'text-indent' value of “h1” elements will be 36px, not 45px, if “h1” is a child of the “body” element.

body {
  font-size: 12px;
  text-indent: 3em;  
}
h1 { font-size: 30px }
/* text-indent: 3em;  /* i.e., 36px = 3 * 12px, not 3 * 30px */

<h1>Title</h1>