When sizing fonts, try not to set in px, instead, you should use rem unit

The standard unit of rem in the browser is 16px, but it is hard to calculate, to accomplish that, we can use:

html {
  /* 62.5% of 16px = 10px */
  font-size: 62.5%;
}

body {
  /* 1.5 x 10px = 15px */
  font-size: 1.5rem;
}

When it comes to sizing the headings, we can use type_scale pick the ideal sizes and implement it in our code.

Ex:

/* change all heading font at a times */
h1,h2,h3,h4,h5,h6 {
  font-family: Georgia, "Times New Roman", Times, serif;
}

h1 {
  font-size: 4.209rem;
}
h2 {
  font-size: 3.157rem;
}