Software & Apps Design A Table of the Aspect Ratio of Commonly-Used Fonts Why font aspect ratio matters in websites by Jennifer Kyrnin Freelance Contributor Jennifer Kyrnin is a professional web developer who assists others in learning web design, HTML, CSS, and XML. our editorial process LinkedIn Jennifer Kyrnin Updated on October 21, 2019 Winslow Productions / Getty Images Design Graphic Design Photoshop Animation & Video 3D Design Tweet Share Email All fonts have an aspect ratio (or value). Font aspect values are calculated by dividing the lowercase x-height of the font by the font size. When you have this value, you can use the fontSizeAdjust style property in CSS3 to specify the aspect value of the preferred font used to display your website. When your website is viewed on computers that don't have your preferred font, the fontSizeAdjust property is used to select the best font size for the replacement font. This property keeps your pages looking good and your type legible even if your first choice font is not available. About the fontSizeAdjust Property Using the fontSizeAdjust property gives you some control over the font substitution when it is necessary. When the first-choice font isn't available, the browser uses the second specified font, which often results in a big change in size. Readability of a font is influenced more by the size of the lowercase letters than the size of the uppercase letters. When the browser knows the aspect value for your preferred font, it can better figure out which size to use when displaying the page in the second-choice font. Here is an example that adjusts font size using the aspect ratio of 0.58, which is the aspect ratio for Verdana. If Verdana is not available on a computer, the browser sizes the replacement font so it has similar size lowercase letters for the best legibility. As of publication, only Mozilla Firefox fully supports the fontSizeAdjust property. Common Font Aspect Ratios This table shows calculations for the aspect ratios of several popular font families. Font Aspect Ratio Arial 0.52 Avant Garde 0.45 Bookman 0.40 Calibri 0.47 Century Schoolbook 0.48 Cochin 0.41 Comic Sans 0.53 Courier 0.43 Courier New 0.42 Garamond 0.38 Georgia 0.48 Helvetica 0.52 Palatino 0.42 Tahoma 0.55 Times New Roman 0.45 Trebuchet 0.52 Verdana 0.58 More from Lifewire 14 Best Free Halloween Fonts How to Make Font Size Bigger or Smaller on Your Screen How to Change the Default Font in the Mac's Mail Program How to Create a Chalkboard Effect Graphic in Photoshop Replacing All the Fonts in a Presentation at One Time Why Are Black Bars Still Visible on HD or 4K Ultra HD TV? How to Install, Update, and Uninstall Fonts in Linux Change Font Colors and Styles on PowerPoint Slides How to Locate Mac or Windows Font Files How to Change Website Font Colors With CSS Web Safe Font Stacks A Guide to CSS Line Spacing Guide to Tablet Displays The CSS Font-Family Property and the Use of Font Stacks How to Use 'ems' to Change Webpage Font Sizes (HTML) What Is an Aspect Ratio and Why Is It Important?