title: Angular Material typography interfering mat-data-table styles
body: <p>I applied the <code>.mat-typography</code> class to the body of my document.
  After implementing data table sorting i noticed the sorting indicator arrow to be slightly off position. After inspecting the document, i noticed that the typography class overwrites the font styles set by the sorting.</p>
  
  <p>Here i forked the sorting demo from material.angular.io and added the typography class: <a href="https://angular-9ddpgm.stackblitz.io" rel="nofollow noreferrer">https://angular-9ddpgm.stackblitz.io</a>
  - Click on the 'No.' header
  - The Arrow has a higher base line as the header itself.</p>
  
  <p>In the original demo (without the typography) this is not the case: <a href="https://material.angular.io/components/table/overview" rel="nofollow noreferrer">https://material.angular.io/components/table/overview</a></p>
  
  <p>Is this a problem from Angular Material or do i need to use the typography settings differently? </p>