title: Converting px to em - text becomes smaller than original
body: <p>Currently in the final stages of building a new website and have recently ran an accessibility checker. The checker is recommending changing my font sizes from px to em. 
  However when I do a straight forward conversion (16px to 1em) the font becomes really small. Am I missing something?</p>
  
  <p>Here is my styling.</p>
  
  <pre><code>.bodyText {font-size: 16px !important; padding-top: 10px; margin-bottom: 20px;}
  .bodyText a {color: #008080 !important; text-decoration: underline;}
  .bodyText a:hover {color: #008080 !important;}
  .bodyText li {font-size: 16px !important; color: #686868;}
  .bodyText p {font-size: 16px !important; color: #686868;}
  .bodyText p strong {color: #333333;}
  </code></pre>
  
  <p>All of this also sits in the body which has this attached.</p>
  
  <pre><code>body {font-size: 16px !important; font-family: "Source Sans Pro", sans-serif !important; font-style: normal; font-weight: normal;}
  tbody {font-size: 16px !important; font-family: "Source Sans Pro", sans-serif !important; font-style: normal; font-weight: normal;}
  </code></pre>