Responsive Font Declaration Target / Context = Result

responsive-text

/*
normal broswers display regular text at 16px
*/
html {
 font-size:16px;
}

/*
reset that to 10px
*/
body {
 font-size: 62.5%; /* 10/16 = 62.5%, so now 1em = 10px */
}

/*
h1 to 30px
*/
h1 {
  font-size: 3em;
}

/*
h1 a set to 14px
h1 is context in this case
*/
h1 a {
  font-size: 0.4666666666666667px;
}

/*
h2 to 24px
*/
h2 {
  font-size:2.4em;
}

/*
h3 to 20px
*/
h3 {
  font-size: 2em;
}

/*
h4 to 18px
*/
h4 {
  font-size:1.8em;
}

/*
h5 to 16px
*/
h5 {
  font-size:1.6em;
}

/*
h6 to 14px
*/
h6 {
 font-size:1.4em;
}

/*
p, li, td to 12px
*/
p, li, td {
  font-size:1.2em;
}