How To Web Design & Dev A Table of the Aspect Ratio of Commonly-Used Fonts Why font aspect ratio matters in websites Share Pin Email Print Winslow Productions / Getty Images Web Design & Dev Basics HTML CSS by Jennifer Kyrnin A published author with extensive website creation and management skills. Updated January 09, 2019 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 Continue Reading Here Is how to Make Vibrant PowerPoint Slides with These Font Tricks 8 Free Easter Font Download for All Your Spring Projects How to Choose a Font for Your Book Design How to Set a New Default Font for Messages in OS X Mail What Are the Names of the Generic Font Families Available in CSS? How to Change the Default Fonts in Microsoft Outlook What The Aspect Ratio Means For TV Viewing 14 Free Halloween Fonts From Spooky to Silly Add a Responsive Background Image to Your Website Style Your Images and Use Images in Styles With CSS Increase Font Size in Windows Mail or Outlook Express How to Replace All the Fonts in Your Presentation A Complete Overview of Typography Basics How to Create Elegant Initial Caps Without Images in CSS What Is a "Font Stack" and How Are They Used? How Can You Clean Up Your Graphic Designs?