Setting Up Font Size for Responsive Projects

How should we set up font size for a responsively designed project?

Current best practice (subject to change) is to use the following approach in your CSS file for your responsively designed projects:

// main.css

body {
  // default font-size for most browsers is 16px
  // setting it to 100% ensures that the base size
  // will conform to the browser defaults
  font-size: 100%;
}


.content {
  // use ems or rems for all other font-sizes
  font-size: 1.2em;
}