Units

• In CSS we have certain units for giving values

• px is the smallest amount of dot that can be rendered on screen. (DPI dots per inch is a pixel density) this can vary depending on the screen

• A px can vary on different screen sizes depending on their DPI

• % is relative to the parent

• Responsive units: vh, vw (in respect to viewport)

• em and rem are font units. rem is root font size which is by default 16px but we can tweak it from browser settings and em means the font size of parent

• vmin & vmax are viewport minimum or maximum (whichever one is viewport’s minimum or maximum)

• Fonts can also be defined in vw for responsiveness

Fonts

• The default font size of the browser is 16px that can be changed from settings

• rem (root which is 16px) and em which depends on closest parent

• When working with responsive fonts (which respects the browser settings) we change our root font size to 62.5% making it 10px. This enables us to easily set sizes

• Setting the font-size to 10px in root element helps us in setting font sizes to other elements

/* Setting font size of html to 10px */
html {
	font-size: 62.5%;
}

h1 {
	font-size: 2rem; /* 20px */
}