Font Size

• Using the font-size property, you can change the size of our font.
• You should not use absolute unit like px for setting font size. Because pixels are not consistent across devices.
• You should use relative units. The best practice for setting the font size is using the rem unit.
• 1 rem is 1x the font size of the root element that is the HTML element.
• The font size will be based on the user settings in browser. The default value is 16px.

html {
    font-size: 100%; /* 16px */
}
body {
    font-size: 1rem;
}

html {
    font-size: 62.5%; /* 10px */
}
body {
    font-size: 1rem;
}
h1 {
	font-size: 2rem;
}

Responsive

• You can easily make the text responsive with very little code.

@media screen and (min-width: 400px) {
    html {
        font-size: 130%;
    }
}

Visualization

https://type-scale.com/

h1, h2, h3, h4, h5, h6 {
    font-family: Arial, Helvetica, sans-serif;
}
h1 {
    font-size: 3.052rem;
}
h2 {
    font-size: 2.441rem;
}