Many developers use multiple font families and font size to have a better representation of a web page.

CSS font-size-adjust accepts several units of measurement within which font sizes are displayed,including pixels, em, rem, keywords, and view port units. It may be applied to CSS Classes and IDs, still on elements themselves. Therefore, it may be used as a great hack to stop a significant decrease within the font size just if your first font choice does not load.

Zero units in CSS

In most cases, the value zero does not require units to be specified in CSS, however,this is not the case when using non-length and non-angle units.

CSS doesn’t usually require zeros to have units- because zero is zero, regardless of units. Since these are all equivalent, the unit less version is often used:

Example

{
  padding: 0px;
  padding: 0pt;
  padding: 0em;
  padding: 0rem;
 
  padding: 0;
}

Relative Sizes

em

1em equal to font size of parent (same as 100%)

The em is simply the font size. In an element with a 2 in font, I em thus means 2 in. Expressing sizes such as margins and paddings, in em means they are related to the font size, and if the user has a big font (e.g., on a big screen) or a small font (e.g., on a handheld device), the sizes will be in proportion.

font-size

CSS font-size property indicates a glyphs’ desired height based on the font. For the scalable font, the scalable factor is applied to calculate the font-size. However, for a non-scalable font. the absolute unit of the font-size is matched with the set size of the font.

font-size: 1.2em;

font-size: x-small;

font-size: smaller;

font-size: 12px;

font-size: 80%;
 

Example

Setting font Sizes CSS

.small {
  font-size: xx-small;
}
.larger {
   font-size: larger;
}
.point {
  font-size: 24pt;
}
.percent {
font-size: 200%;
}

ex

Height to lower case “x”

The div will 50% of the viewport’s height. So if the browser window is 900 pixels high, the height of the div will be 450 pixels.

The CSS ex unit gets its name from x-height in typography, or “the height of the letter x in the font”. In many fonts, the lowercase x character is usuallly about half the height of the largest character.

In CSS, 1ex is the x-height of the font, or half of 1em.

View height. 1vh is 1% of the height of the viewport.

Example

div {
  height: 50vh;
}

Percentage

The percentage CSS data type represents a percentage value. It is often used to define size as relative to an element’s parent object. Numerous properties can use percentages, such as width, height, margin, padding, and font-size.

Example

<div style="background-color:navy;">
<div style="width:50%; margin-left:20%; background-color:chartreuse;">
width: 50%, left margin:20% 
</div>
<div style="width:30%, margin-left:60%; background-color:pink;">
  width: 30%, Left margin:60%
</div>
</div>

Font Size

Example

<div style="font-size:18px;">
  <p>Full-size text (18px)</p>
  <p><span style="font-size:50%;">50%(9px)</span></p>
  <p><span style="font-size:200%;">200% (36px)</span></p>
</div>

Absolute Sizes

CSS Units

CSS has several different units for expressing a length.

Many CSS properties take “length” values, such as width, margin, padding, font-size, etc.

Length is a number followed by a length unit, such as 10px, 2em etc.

Example

Set different length values, using px (pixels):

h1 {
   font-size: 60px;
}
p {
  font-size: 25px;
  line-height: 50px;
}

Absolute Length Units:

Absolute length units are fixed in relation to each other. They are highly dependent on the output medium, so are mainly useful when the output environment is known. The absolute units consist of the physical units (in, cm, mm, pt, pc) and the px unit.

in

inches -1 in is equal to 2.54cm.

cm

Centimeters.

mm

millimeters.

pt

points- in CSS, one point is defined as 1/72 inch (0.353mm).

pc

picas – 1pc is equal to 12pt.

px

pixel units- 1px is equal to 0.75 pt.

Absolute physical units such as in, cm, mm, etc. should be used for point media and similar high-resolution devices. Whereas, for on-screen display such as desktop and lower-resolution devices, it is recommended to use the pixel or em units.

Example

h1 { margin: 0.5in; } /* inches */

h2 { line-height: 3cm: } /* centimeters */

h3 { word-spacing: 4mm, } /* millimeters */

h4 { font-size: 12pt;} /* points */

h5 { font-size: 1pc; } / * picas * /

h6 { font-size: 12px; } / * picas * /