p {
font-size: 16px;
}
p {
font-size: 1.0em;
}px
Allows you to accuratly specify the exact size in pixels. Many browsers will not allow users to alter the size of text specified with px. Greate for design, bad for accesibility and users wanting to change the size of text on a page
em
em unit of measurement refers to the font size of a parent element. If you set a font’s size to 2em, the font size will be twice that of the parent element.
If no px font size has been specified for any parent element then the default font size of a web page is typically 16px.
body {
font-size: 16px; /*16px is the typical browser default text size*/
}
h1 {
font-size: 2.0em;
}
p {
font-size: 1.0em;
}rem
Same as em, except that the size is in relation to the root <html> element, any px font size specified for a parent element is ignored and the root value always used as the base size.
If no px font size has been specified for the root element then the default font size of a web page is typically 16px.
html {
font-size: 16px; /*16px is the typical browser default text size*/
}
body {
font-size: 14px; /* <<<This will be ignored by rem*/
}
#MyWrapper {
font-size: 18px; /* <<<This will be ignored by rem*/
}
h1 {
font-size: 2.0rem;
}
p {
font-size: 1.0rem;
}vw, vh
Viewport units, calculated as a percentage of the browser’s viewport size.
This can be useful because the size of your fonts will change as you resize the browser window. This can allow you to deliver a more accessible user experience adaptive to different browser and device sizes.
vh = view height
1vh is equal to 1% of the viewport height, for example. So, if you have a viewport 1000px wide, 1vh equals 10px.
vw = view width