Font-size & x-height

Examples of x-height as the determining size factor

Notice: The test panels on this page are not responsive
and are intended for desktop viewing on a standard sRGB monitor.

Readability Research

"Font-size and x-height" Sept. 2021

This page demonstrates why x-height is ideally how we should be specifying font-size for web based content. In the first example box below, we can see that every sample font is set to the exact same size of 24px, yet every one renders a different size to screen.

Under each font sample is a line of Helvetica that is set so its CapHeight is the same as the x-height of the sample font, to help illustrate that not only is the x-height very different for every font relative to its "font size", but also and importantly, that browsers are already capable of determining the x-height of a font.

Viewing notes: set the text zoom level at 100%, otherwise the Helvetica example line will not render the correct size on some browsers. Also, if several of the fonts look the same such as a fantasy font like Zaphino, then those fonts did not download correctly from Google fonts. the fallback font was set to "fantasy" to make it obvious if the font is not properly downloaded and displayed.



Test Panel ONE:
All Fonts at 24px

NOTICE: Any samples displaying this font means that sample did not load correctly

All sample fonts on this panel are 24px.

The Helvetica reference is set so the Helvetica cap height
is equal to the x-height of the sample font above it


This is the font Encode Sans SC at 24px and normal weight.
This demonstration underlines the importance of x-height, as opposed to "font-size:" as the ideal font property for sizing.
1X2X3X4X5X - HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Peddana at 24px and normal weight.
This demonstration underlines the importance of x-height, as opposed to "font-size:" as the ideal font property for sizing.
1X2X3X4X5X - HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Jaldi at 24px and normal weight.
This demonstration underlines the importance of x-height, as opposed to "font-size:" as the ideal font property for sizing.
1X2X3X4X5X - HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Teko at 24px and normal weight.
This demonstration underlines the importance of x-height, as opposed to "font-size:" as the ideal font property for sizing.
1X2X3X4X5X - HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Josefin Sans at 24px and normal weight.
This demonstration underlines the importance of x-height, as opposed to "font-size:" as the ideal font property for sizing.
1X2X3X4X5X - HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Kanit at 24px and normal weight.
This demonstration underlines the importance of x-height, as opposed to "font-size:" as the ideal font property for sizing.
1X2X3X4X5X - HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Chathura at 24px and normal weight.
This demonstration underlines the importance of x-height, as opposed to "font-size:" as the ideal font property for sizing.
1X2X3X4X5X - HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Kumbh Sans at 24px and normal weight.
This demonstration underlines the importance of x-height, as opposed to "font-size:" as the ideal font property for sizing.
1X2X3X4X5X - HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Orbitron at 24px and normal weight.
This demonstration underlines the importance of x-height, as opposed to "font-size:" as the ideal font property for sizing.
1X2X3X4X5X - HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Spartan at 24px and normal weight.
This demonstration underlines the importance of x-height, as opposed to "font-size:" as the ideal font property for sizing.
1X2X3X4X5X - HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Gurajada at 24px and normal weight.
This demonstration underlines the importance of x-height, as opposed to "font-size:" as the ideal font property for sizing.
1X2X3X4X5X - HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Hina Mincho at 24px and normal weight.
This demonstration underlines the importance of x-height, as opposed to "font-size:" as the ideal font property for sizing.
1X2X3X4X5X - HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Sorts Mill Goudy at 24px and normal weight.
This demonstration underlines the importance of x-height, as opposed to "font-size:" as the ideal font property for sizing.
1X2X3X4X5X - HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Cormorant at 24px and normal weight.
This demonstration underlines the importance of x-height, as opposed to "font-size:" as the ideal font property for sizing.
1X2X3X4X5X - HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Gidugu at 24px and normal weight.
This demonstration underlines the importance of x-height, as opposed to "font-size:" as the ideal font property for sizing.
1X2X3X4X5X - HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Reem Kufi at 24px and normal weight.
This demonstration underlines the importance of x-height, as opposed to "font-size:" as the ideal font property for sizing.
1X2X3X4X5X - HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Darker Grotesque at 24px and normal weight.
This demonstration underlines the importance of x-height, as opposed to "font-size:" as the ideal font property for sizing.
1X2X3X4X5X - HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Pompiere at 24px and normal weight.
This demonstration underlines the importance of x-height, as opposed to "font-size:" as the ideal font property for sizing.
1X2X3X4X5X - HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Nanum Pen Script at 24px and normal weight.
This demonstration underlines the importance of x-height, as opposed to "font-size:" as the ideal font property for sizing.
1X2X3X4X5X - HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

Discussion

As can be seen, despite all of these fonts being set at 24px, they are drastically different sizes. While a standard relating to font size might be "testable" it is otherwise useless without considerations for font size and weight variations.

In the next test panel, we set all these fonts such that they all had the same relative x-height.

Test Panel TWO:
All the same x-height

NOTICE: Any samples displaying this font means they did not load correctly

Same x-height (manually adjusted) for all fonts on this panel

Adjustments made using Chrome, some browsers, like Safari, may vary

The Helvetica reference is set so the Helvetica cap height
is equal to the x-height of the sample font above it


This is the font Encode Sans SC at 20.9px and normal weight.
This demonstration underlines the importance of x-height, as opposed to "font-size:" as the ideal font property for sizing.
1X2X3X4X5X - HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Peddana at 39.3px and normal weight.
This demonstration underlines the importance of x-height, as opposed to "font-size:" as the ideal font property for sizing.
1X2X3X4X5X - HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Jaldi at 27.3px and normal weight.
This demonstration underlines the importance of x-height, as opposed to "font-size:" as the ideal font property for sizing.
1X2X3X4X5X - HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Teko at 25.5px and normal weight.
This demonstration underlines the importance of x-height, as opposed to "font-size:" as the ideal font property for sizing.
1X2X3X4X5X - HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Josefin Sans at 30.05px and normal weight.
This demonstration underlines the importance of x-height, as opposed to "font-size:" as the ideal font property for sizing.
1X2X3X4X5X - HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Kanit at 26.2px and normal weight.
This demonstration underlines the importance of x-height, as opposed to "font-size:" as the ideal font property for sizing.
1X2X3X4X5X - HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Chathura at 42.3px and normal weight.
This demonstration underlines the importance of x-height, as opposed to "font-size:" as the ideal font property for sizing.
1X2X3X4X5X - HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Kumbh Sans at 25.4px and normal weight.
This demonstration underlines the importance of x-height, as opposed to "font-size:" as the ideal font property for sizing.
1X2X3X4X5X - HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Orbitron at 21.4px and normal weight.
This demonstration underlines the importance of x-height, as opposed to "font-size:" as the ideal font property for sizing.
1X2X3X4X5X - HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Spartan at 24.3px and normal weight.
This demonstration underlines the importance of x-height, as opposed to "font-size:" as the ideal font property for sizing.
1X2X3X4X5X - HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Gurajada at 37.9px and normal weight.
This demonstration underlines the importance of x-height, as opposed to "font-size:" as the ideal font property for sizing.
1X2X3X4X5X - HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Hina Mincho at 32.7px and normal weight.
This demonstration underlines the importance of x-height, as opposed to "font-size:" as the ideal font property for sizing.
1X2X3X4X5X - HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Sorts Mill Goudy at 29.2px and normal weight.
This demonstration underlines the importance of x-height, as opposed to "font-size:" as the ideal font property for sizing.
1X2X3X4X5X - HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Cormorant at 32.2px and normal weight.
This demonstration underlines the importance of x-height, as opposed to "font-size:" as the ideal font property for sizing.
1X2X3X4X5X - HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Gidugu at 38.8px and normal weight.
This demonstration underlines the importance of x-height, as opposed to "font-size:" as the ideal font property for sizing.
1X2X3X4X5X - HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Reem Kufi at 29.75px and normal weight.
This demonstration underlines the importance of x-height, as opposed to "font-size:" as the ideal font property for sizing.
1X2X3X4X5X - HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Darker Grotesque at 30.6px and normal weight.
This demonstration underlines the importance of x-height, as opposed to "font-size:" as the ideal font property for sizing.
1X2X3X4X5X - HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Pompiere at 33.3px and normal weight.
This demonstration underlines the importance of x-height, as opposed to "font-size:" as the ideal font property for sizing.
1X2X3X4X5X - HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Nanum Pen Script at 25.8px and normal weight.
This demonstration underlines the importance of x-height, as opposed to "font-size:" as the ideal font property for sizing.
1X2X3X4X5X - HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

Discussion

This clearly demonstrates that using x-height to set the font size provides a far more consistent and expected result. Here all the fonts are very close in apparent size, but their font-size settings are all very different. Here's the list in order of the above presentation:

  • 20.9px - Encode Sans SC
  • 39.3px - Peddana
  • 27.3px - Jaldi
  • 25.4px - Teko
  • 30.0px - Josefin Sans
  • 26.2px - Kanit
  • 42.2px - Chathura
  • 25.4px - Kumbh Sans
  • 21.4px - Orbitron
  • 24.2px - Spartan
  • 37.9px - Gurajada
  • 32.7px - Hina Mincho
  • 29.2px - Sorts Mill Goudy
  • 32.2px - Cormorant
  • 38.8px - Gidugu
  • 29.7px - Reem Kufi
  • 30.6px - Darker Grotesque
  • 33.3px - Pompiere
  • 25.8px - Nanum Pen Script

They were all set to be equivalent to Helvetica 24px. In order to make them all this same apparent size, these fonts had to have their font-size set anywhere from 20.9px to as high as 42.2px. In other words, the largest font is more than twice the size of the smallest font!

It should be clear that a guideline stating a font size without considering the context of the font design and x-height does not lead to a useful standard. This is why in WCAG 3 we stated that fonts must be compared to a reference font such as Helvetica.

However, having to manually compare to a reference font prevents automated testing. As far as size, the solution is to convince browsers developers, and content creators, to adopt the font-x-size property that I have proposed for CSS.

Other Issues

This experiments also demonstrates some other issues that needs to be addressed. Foremost after size is the lack of standardization on font weight. Every font above is weight 400 (normal) Every single one. Yet they all are clearly a different weight and therefore all are a different contrast.

And when adjusting for x-height, some other things break, mainly properties that use em, such as line-height. Since the font-size is jacked around to make the x-height the same, the value of 1em becomes very different. This is solved with the companion CSS property, ex-to-em:

These proposed properties are discussed on the LVTF Wiki.

REFERENCE

The following charts provide reference to known critical font size factors for best readability.

Critical Font Sizing Chart

Screen Pixel Density vs Viewing Distance

This chart displays the relative screen pitch needed to maintain a CSS px at the visual angle of 1.278 arc minutes.

x-height for sizing

What the above demonstrate is the need for the use of x-height to set font size. This is particularly important for body type. Below is the only current CSS property that sort-of allows a way to set x-height. But as will be discussed further down the page, it is unsupported by all but one browser (Firefox) and has a number of issues that prevent its use as a common font sizing tool.


Test Panel THREE:
CSS font-size-adjust

This Panel REQUIRES Firefox

NOTICE: Any samples displaying this font means they did not load correctly

All sample fonts on this panel are set 21px, and
in addition, font-size-adjust is set to

The Helvetica reference is set so the Helvetica cap height
is equal to the x-height of the sample font above it

FIREFOX REQUIRED


This is the font Encode Sans SC at 21px BUT with font-size-adjust: 0.52; to align x-heights.
This demonstration underlines the importance of x-height, as opposed to "font-size:" as the ideal font property for sizing.
1X2X3X4X5X - HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Peddana at 21px BUT with font-size-adjust: 0.52; to align x-heights.
This demonstration underlines the importance of x-height, as opposed to "font-size:" as the ideal font property for sizing.
1X2X3X4X5X - HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Jaldi at 21px BUT with font-size-adjust: 0.52; to align x-heights.
This demonstration underlines the importance of x-height, as opposed to "font-size:" as the ideal font property for sizing.
1X2X3X4X5X - HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Teko at 21px BUT with font-size-adjust: 0.52; to align x-heights.
This demonstration underlines the importance of x-height, as opposed to "font-size:" as the ideal font property for sizing.
1X2X3X4X5X - HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Josefin Sans at 21px BUT with font-size-adjust: 0.52; to align x-heights.
This demonstration underlines the importance of x-height, as opposed to "font-size:" as the ideal font property for sizing.
1X2X3X4X5X - HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Kanit at 21px BUT with font-size-adjust: 0.52; to align x-heights.
This demonstration underlines the importance of x-height, as opposed to "font-size:" as the ideal font property for sizing.
1X2X3X4X5X - HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Chathura at 21px BUT with font-size-adjust: 0.52; to align x-heights.
This demonstration underlines the importance of x-height, as opposed to "font-size:" as the ideal font property for sizing.
1X2X3X4X5X - HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Kumbh Sans at 21px BUT with font-size-adjust: 0.52; to align x-heights.
This demonstration underlines the importance of x-height, as opposed to "font-size:" as the ideal font property for sizing.
1X2X3X4X5X - HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Orbitron at 21px BUT with font-size-adjust: 0.52; to align x-heights.
This demonstration underlines the importance of x-height, as opposed to "font-size:" as the ideal font property for sizing.
1X2X3X4X5X - HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Spartan at 21px BUT with font-size-adjust: 0.52; to align x-heights.
This demonstration underlines the importance of x-height, as opposed to "font-size:" as the ideal font property for sizing.
1X2X3X4X5X - HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Gurajada at 21px BUT with font-size-adjust: 0.52; to align x-heights.
This demonstration underlines the importance of x-height, as opposed to "font-size:" as the ideal font property for sizing.
1X2X3X4X5X - HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Hina Mincho at 21px BUT with font-size-adjust: 0.52; to align x-heights.
This demonstration underlines the importance of x-height, as opposed to "font-size:" as the ideal font property for sizing.
1X2X3X4X5X - HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Sorts Mill Goudy at 21px BUT with font-size-adjust: 0.52; to align x-heights.
This demonstration underlines the importance of x-height, as opposed to "font-size:" as the ideal font property for sizing.
1X2X3X4X5X - HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Cormorant at 21px BUT with font-size-adjust: 0.52; to align x-heights.
This demonstration underlines the importance of x-height, as opposed to "font-size:" as the ideal font property for sizing.
1X2X3X4X5X - HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Gidugu at 21px BUT with font-size-adjust: 0.52; to align x-heights.
This demonstration underlines the importance of x-height, as opposed to "font-size:" as the ideal font property for sizing.
1X2X3X4X5X - HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Reem Kufi at 21px BUT with font-size-adjust: 0.52; to align x-heights.
This demonstration underlines the importance of x-height, as opposed to "font-size:" as the ideal font property for sizing.
1X2X3X4X5X - HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Darker Grotesque at 21px BUT with font-size-adjust: 0.52; to align x-heights.
This demonstration underlines the importance of x-height, as opposed to "font-size:" as the ideal font property for sizing.
1X2X3X4X5X - HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Pompiere at 21px BUT with font-size-adjust: 0.52; to align x-heights.
This demonstration underlines the importance of x-height, as opposed to "font-size:" as the ideal font property for sizing.
1X2X3X4X5X - HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Nanum Pen Script at 21px BUT with font-size-adjust: 0.52; to align x-heights.
This demonstration underlines the importance of x-height, as opposed to "font-size:" as the ideal font property for sizing.
1X2X3X4X5X - HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

Discussion (font-size-adjust)

While the font-size-adjust: property can allow for some fonts to be adjusted to an x-height ratio, this is not a complete nor fully functional solution. Among other things, it works in Firefox only, and has no other support. Second, the implementation breaks other important properties such as line-height: and exhibits unexpected results without some hacks.

This property also does not set the font size directly, so requires calculations or even a polyfill, to emulate any kind of useful cascading. While it is a valiant attempt to solve an important problem, it comes up just a bit short, unfortunately.

Additional discussion will be added as proposals for related properties move forward.

Summary

This work is part of an ongoing research project into human visual perception of web content. The work shown here is preliminary, and is not yet a functional part of any standard. It is presented for discussion purposes.

Glossary

x-height: This is the height of the lower case "x" of a font. This is often described as the ration of the x-height to the font-size. As an example, an x-height ratio of 0.625 means that for a 16px font, the x-height would be 10px.

font-size: This is the CSS property that sets the font size for an element. It does not represent the size of the glyphs in a font, only the "body" of the font. The upper case and lower case letters are smaller than the "font-size". As an example, if Helvetica Neue is set at font-size: 16px; then the uppercase letters will be 11.5px, and the lower case letters will be 8.4px. The upper-case glyphs are about 72% of the font-size, and the lower-case glyphs are about 52.5% of the font size.

Glyph: The specific design of an individual letter in a font.



Test Panel FOUR:
Using ex for line-height

This Panel --

NOTICE: Any samples displaying this font means they did not load correctly

All sample fonts on this panel are set 18.8px, and
in addition, line-height: is set to 2.75ex

The Helvetica reference is set so the Helvetica cap height
is equal to the x-height of the sample font above it


This is the font Encode Sans SC at 18.8px And the line-height here is set to 2.75ex. While the font size can not be directly set per x-height, at least the x-height is useable via the ex length. 1ex is one x-height. In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, and 2.75ex to 3ex may be ideal for some fonts. xxx xxx(box is 2.75ex high)

For paragraph spacing, we want an additional minimum of 1.5 to 2.0 times the line-height. An extra 1.5 times for a line height of 2.75 is 1.375, but we rounded up making the bottom padding as 1.5ex. This demonstration underlines the importance of using settings that are relative to x-height

sample xxx xxxx XXX X HELVETICA with CAP-HEIGHT SET to x-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Peddana at 18.8px And the line-height here is set to 2.75ex. While the font size can not be directly set per x-height, at least the x-height is useable via the ex length. 1ex is one x-height. In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, and 2.75ex to 3ex may be ideal for some fonts. xxx xxx(box is 2.75ex high)

For paragraph spacing, we want an additional minimum of 1.5 to 2.0 times the line-height. An extra 1.5 times for a line height of 2.75 is 1.375, but we rounded up making the bottom padding as 1.5ex. This demonstration underlines the importance of using settings that are relative to x-height

sample xxx xxxx XXX X HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Jaldi at 18.8px And the line-height here is set to 2.75ex. While the font size can not be directly set per x-height, at least the x-height is useable via the ex length. 1ex is one x-height. In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, and 2.75ex to 3ex may be ideal for some fonts. xxx xxx(box is 2.75ex high)

For paragraph spacing, we want an additional minimum of 1.5 to 2.0 times the line-height. An extra 1.5 times for a line height of 2.75 is 1.375, but we rounded up making the bottom padding as 1.5ex. This demonstration underlines the importance of using settings that are relative to x-height

sample xxx xxxx XXX X HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Teko at 18.8px And the line-height here is set to 2.75ex. While the font size can not be directly set per x-height, at least the x-height is useable via the ex length. 1ex is one x-height. In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, and 2.75ex to 3ex may be ideal for some fonts. xxx xxx(box is 2.75ex high)

For paragraph spacing, we want an additional minimum of 1.5 to 2.0 times the line-height. An extra 1.5 times for a line height of 2.75 is 1.375, but we rounded up making the bottom padding as 1.5ex. This demonstration underlines the importance of using settings that are relative to x-height

sample xxx xxxx XXX X HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Josefin Sans at 18.8px And the line-height here is set to 2.75ex. While the font size can not be directly set per x-height, at least the x-height is useable via the ex length. 1ex is one x-height. In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, and 2.75ex to 3ex may be ideal for some fonts. xxx xxx(box is 2.75ex high)

For paragraph spacing, we want an additional minimum of 1.5 to 2.0 times the line-height. An extra 1.5 times for a line height of 2.75 is 1.375, but we rounded up making the bottom padding as 1.5ex. This demonstration underlines the importance of using settings that are relative to x-height

sample xxx xxxx XXX X HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Kanit at 18.8px And the line-height here is set to 2.75ex. While the font size can not be directly set per x-height, at least the x-height is useable via the ex length. 1ex is one x-height. In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, and 2.75ex to 3ex may be ideal for some fonts. xxx xxx(box is 2.75ex high)

For paragraph spacing, we want an additional minimum of 1.5 to 2.0 times the line-height. An extra 1.5 times for a line height of 2.75 is 1.375, but we rounded up making the bottom padding as 1.5ex. This demonstration underlines the importance of using settings that are relative to x-height

sample xxx xxxx XXX X HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Chathura at 18.8px And the line-height here is set to 2.75ex. While the font size can not be directly set per x-height, at least the x-height is useable via the ex length. 1ex is one x-height. In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, and 2.75ex to 3ex may be ideal for some fonts. xxx xxx(box is 2.75ex high)

For paragraph spacing, we want an additional minimum of 1.5 to 2.0 times the line-height. An extra 1.5 times for a line height of 2.75 is 1.375, but we rounded up making the bottom padding as 1.5ex. This demonstration underlines the importance of using settings that are relative to x-height

sample xxx xxxx XXX X HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Kumbh Sans at 18.8px And the line-height here is set to 2.75ex. While the font size can not be directly set per x-height, at least the x-height is useable via the ex length. 1ex is one x-height. In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, and 2.75ex to 3ex may be ideal for some fonts. xxx xxx(box is 2.75ex high)

For paragraph spacing, we want an additional minimum of 1.5 to 2.0 times the line-height. An extra 1.5 times for a line height of 2.75 is 1.375, but we rounded up making the bottom padding as 1.5ex. This demonstration underlines the importance of using settings that are relative to x-height

sample xxx xxxx XXX X HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Orbitron at 18.8px And the line-height here is set to 2.75ex. While the font size can not be directly set per x-height, at least the x-height is useable via the ex length. 1ex is one x-height. In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, and 2.75ex to 3ex may be ideal for some fonts. xxx xxx(box is 2.75ex high)

For paragraph spacing, we want an additional minimum of 1.5 to 2.0 times the line-height. An extra 1.5 times for a line height of 2.75 is 1.375, but we rounded up making the bottom padding as 1.5ex. This demonstration underlines the importance of using settings that are relative to x-height

sample xxx xxxx XXX X HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Spartan at 18.8px And the line-height here is set to 2.75ex. While the font size can not be directly set per x-height, at least the x-height is useable via the ex length. 1ex is one x-height. In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, and 2.75ex to 3ex may be ideal for some fonts. xxx xxx(box is 2.75ex high)

For paragraph spacing, we want an additional minimum of 1.5 to 2.0 times the line-height. An extra 1.5 times for a line height of 2.75 is 1.375, but we rounded up making the bottom padding as 1.5ex. This demonstration underlines the importance of using settings that are relative to x-height

sample xxx xxxx XXX X HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Gurajada at 18.8px And the line-height here is set to 2.75ex. While the font size can not be directly set per x-height, at least the x-height is useable via the ex length. 1ex is one x-height. In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, and 2.75ex to 3ex may be ideal for some fonts. xxx xxx(box is 2.75ex high)

For paragraph spacing, we want an additional minimum of 1.5 to 2.0 times the line-height. An extra 1.5 times for a line height of 2.75 is 1.375, but we rounded up making the bottom padding as 1.5ex. This demonstration underlines the importance of using settings that are relative to x-height

sample xxx xxxx XXX X HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Hina Mincho at 18.8px And the line-height here is set to 2.75ex. While the font size can not be directly set per x-height, at least the x-height is useable via the ex length. 1ex is one x-height. In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, and 2.75ex to 3ex may be ideal for some fonts. xxx xxx(box is 2.75ex high)

For paragraph spacing, we want an additional minimum of 1.5 to 2.0 times the line-height. An extra 1.5 times for a line height of 2.75 is 1.375, but we rounded up making the bottom padding as 1.5ex. This demonstration underlines the importance of using settings that are relative to x-height

sample xxx xxxx XXX X HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Sorts Mill Goudy at 18.8px And the line-height here is set to 2.75ex. While the font size can not be directly set per x-height, at least the x-height is useable via the ex length. 1ex is one x-height. In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, and 2.75ex to 3ex may be ideal for some fonts. xxx xxx(box is 2.75ex high)

For paragraph spacing, we want an additional minimum of 1.5 to 2.0 times the line-height. An extra 1.5 times for a line height of 2.75 is 1.375, but we rounded up making the bottom padding as 1.5ex. This demonstration underlines the importance of using settings that are relative to x-height

sample xxx xxxx XXX X HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Cormorant at 18.8px And the line-height here is set to 2.75ex. While the font size can not be directly set per x-height, at least the x-height is useable via the ex length. 1ex is one x-height. In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, and 2.75ex to 3ex may be ideal for some fonts. xxx xxx(box is 2.75ex high)

For paragraph spacing, we want an additional minimum of 1.5 to 2.0 times the line-height. An extra 1.5 times for a line height of 2.75 is 1.375, but we rounded up making the bottom padding as 1.5ex. This demonstration underlines the importance of using settings that are relative to x-height

sample xxx xxxx XXX X HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Gidugu at 18.8px And the line-height here is set to 2.75ex. While the font size can not be directly set per x-height, at least the x-height is useable via the ex length. 1ex is one x-height. In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, and 2.75ex to 3ex may be ideal for some fonts. xxx xxx(box is 2.75ex high)

For paragraph spacing, we want an additional minimum of 1.5 to 2.0 times the line-height. An extra 1.5 times for a line height of 2.75 is 1.375, but we rounded up making the bottom padding as 1.5ex. This demonstration underlines the importance of using settings that are relative to x-height

sample xxx xxxx XXX X HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Reem Kufi at 18.8px And the line-height here is set to 2.75ex. While the font size can not be directly set per x-height, at least the x-height is useable via the ex length. 1ex is one x-height. In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, and 2.75ex to 3ex may be ideal for some fonts. xxx xxx(box is 2.75ex high)

For paragraph spacing, we want an additional minimum of 1.5 to 2.0 times the line-height. An extra 1.5 times for a line height of 2.75 is 1.375, but we rounded up making the bottom padding as 1.5ex. This demonstration underlines the importance of using settings that are relative to x-height

sample xxx xxxx XXX X HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Darker Grotesque at 18.8px And the line-height here is set to 2.75ex. While the font size can not be directly set per x-height, at least the x-height is useable via the ex length. 1ex is one x-height. In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, and 2.75ex to 3ex may be ideal for some fonts. xxx xxx(box is 2.75ex high)

For paragraph spacing, we want an additional minimum of 1.5 to 2.0 times the line-height. An extra 1.5 times for a line height of 2.75 is 1.375, but we rounded up making the bottom padding as 1.5ex. This demonstration underlines the importance of using settings that are relative to x-height

sample xxx xxxx XXX X HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This font has crazy high ascenders, so line height 2.75ex is not enough!

This is the font Pompiere at 18.8px And the line-height here is set to 2.75ex. While the font size can not be directly set per x-height, at least the x-height is useable via the ex length. 1ex is one x-height. In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, and 2.75ex to 3ex may be ideal for some fonts. xxx xxx(box is 2.75ex high)

For paragraph spacing, we want an additional minimum of 1.5 to 2.0 times the line-height. An extra 1.5 times for a line height of 2.75 is 1.375, but we rounded up making the bottom padding as 1.5ex. This demonstration underlines the importance of using settings that are relative to x-height

sample xxx xxxx XXX X HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

And some fonts are like this, the x as rendered isn't even close to the reported x-height.

This is the font Nanum Pen Script at 18.8px And the line-height here is set to 2.75ex. While the font size can not be directly set per x-height, at least the x-height is useable via the ex length. 1ex is one x-height. In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, and 2.75ex to 3ex may be ideal for some fonts. xxx xxx(box is 2.75ex high)

For paragraph spacing, we want an additional minimum of 1.5 to 2.0 times the line-height. An extra 1.5 times for a line height of 2.75 is 1.375, but we rounded up making the bottom padding as 1.5ex. This demonstration underlines the importance of using settings that are relative to x-height

sample xxx xxxxx XXX X HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

Test Panel FIVE:
Using ex for line-height Part Deux

This Panel -- Line Height at 3.25

NOTICE: Any samples displaying this font means they did not load correctly

All sample fonts on this panel are set 18.8px, and
in addition, line-height: is set to 3.25ex

The Helvetica reference is set so the Helvetica cap height
is equal to the x-height of the sample font above it


This is the font Encode Sans SC at 18.8px And the line-height here is set to 3.25ex. While the font size can not be directly set per x-height, at least the x-height is useable via the ex length. 1ex is one x-height. In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, over 3.25ex may be ideal for some fonts. xxx xxx(box is 3.25ex high)

For paragraph spacing, we want an additional minimum of 1.5 to 2.0 times the line-height. An extra 1.5 times for a line height of 3.25 is 1.625, and we set the bottom padding as 1.625ex. This demonstration underlines the importance of using settings that are relative to x-height, but also in view of panel FOUR, some fonts still need special consideration.

sample xxx xxxx XXX X HELVETICA with CAP-HEIGHT SET to x-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Peddana at 18.8px And the line-height here is set to 3.25ex. While the font size can not be directly set per x-height, at least the x-height is useable via the ex length. 1ex is one x-height. In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, over 3.25ex may be ideal for some fonts. xxx xxx(box is 3.25ex high)

For paragraph spacing, we want an additional minimum of 1.5 to 2.0 times the line-height. An extra 1.5 times for a line height of 3.25 is 1.625, and we set the bottom padding as 1.625ex. This demonstration underlines the importance of using settings that are relative to x-height, but also in view of panel FOUR, some fonts still need special consideration.

sample xxx xxxx XXX X HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Jaldi at 18.8px And the line-height here is set to 3.25ex. While the font size can not be directly set per x-height, at least the x-height is useable via the ex length. 1ex is one x-height. In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, over 3.25ex may be ideal for some fonts. xxx xxx(box is 3.25ex high)

For paragraph spacing, we want an additional minimum of 1.5 to 2.0 times the line-height. An extra 1.5 times for a line height of 3.25 is 1.625, and we set the bottom padding as 1.625ex. This demonstration underlines the importance of using settings that are relative to x-height, but also in view of panel FOUR, some fonts still need special consideration.

sample xxx xxxx XXX X HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Teko at 18.8px And the line-height here is set to 3.25ex. While the font size can not be directly set per x-height, at least the x-height is useable via the ex length. 1ex is one x-height. In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, over 3.25ex may be ideal for some fonts. xxx xxx(box is 3.25ex high)

For paragraph spacing, we want an additional minimum of 1.5 to 2.0 times the line-height. An extra 1.5 times for a line height of 3.25 is 1.625, and we set the bottom padding as 1.625ex. This demonstration underlines the importance of using settings that are relative to x-height, but also in view of panel FOUR, some fonts still need special consideration.

sample xxx xxxx XXX X HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Josefin Sans at 18.8px And the line-height here is set to 3.25ex. While the font size can not be directly set per x-height, at least the x-height is useable via the ex length. 1ex is one x-height. In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, over 3.25ex may be ideal for some fonts. xxx xxx(box is 3.25ex high)

For paragraph spacing, we want an additional minimum of 1.5 to 2.0 times the line-height. An extra 1.5 times for a line height of 3.25 is 1.625, and we set the bottom padding as 1.625ex. This demonstration underlines the importance of using settings that are relative to x-height, but also in view of panel FOUR, some fonts still need special consideration.

sample xxx xxxx XXX X HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Kanit at 18.8px And the line-height here is set to 3.25ex. While the font size can not be directly set per x-height, at least the x-height is useable via the ex length. 1ex is one x-height. In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, over 3.25ex may be ideal for some fonts. xxx xxx(box is 3.25ex high)

For paragraph spacing, we want an additional minimum of 1.5 to 2.0 times the line-height. An extra 1.5 times for a line height of 3.25 is 1.625, and we set the bottom padding as 1.625ex. This demonstration underlines the importance of using settings that are relative to x-height, but also in view of panel FOUR, some fonts still need special consideration.

sample xxx xxxx XXX X HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Chathura at 18.8px And the line-height here is set to 3.25ex. While the font size can not be directly set per x-height, at least the x-height is useable via the ex length. 1ex is one x-height. In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, over 3.25ex may be ideal for some fonts. xxx xxx(box is 3.25ex high)

For paragraph spacing, we want an additional minimum of 1.5 to 2.0 times the line-height. An extra 1.5 times for a line height of 3.25 is 1.625, and we set the bottom padding as 1.625ex. This demonstration underlines the importance of using settings that are relative to x-height, but also in view of panel FOUR, some fonts still need special consideration.

sample xxx xxxx XXX X HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Kumbh Sans at 18.8px And the line-height here is set to 3.25ex. While the font size can not be directly set per x-height, at least the x-height is useable via the ex length. 1ex is one x-height. In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, over 3.25ex may be ideal for some fonts. xxx xxx(box is 3.25ex high)

For paragraph spacing, we want an additional minimum of 1.5 to 2.0 times the line-height. An extra 1.5 times for a line height of 3.25 is 1.625, and we set the bottom padding as 1.625ex. This demonstration underlines the importance of using settings that are relative to x-height, but also in view of panel FOUR, some fonts still need special consideration.

sample xxx xxxx XXX X HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Orbitron at 18.8px And the line-height here is set to 3.25ex. While the font size can not be directly set per x-height, at least the x-height is useable via the ex length. 1ex is one x-height. In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, over 3.25ex may be ideal for some fonts. xxx xxx(box is 3.25ex high)

For paragraph spacing, we want an additional minimum of 1.5 to 2.0 times the line-height. An extra 1.5 times for a line height of 3.25 is 1.625, and we set the bottom padding as 1.625ex. This demonstration underlines the importance of using settings that are relative to x-height, but also in view of panel FOUR, some fonts still need special consideration.

sample xxx xxxx XXX X HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Spartan at 18.8px And the line-height here is set to 3.25ex. While the font size can not be directly set per x-height, at least the x-height is useable via the ex length. 1ex is one x-height. In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, over 3.25ex may be ideal for some fonts. xxx xxx(box is 3.25ex high)

For paragraph spacing, we want an additional minimum of 1.5 to 2.0 times the line-height. An extra 1.5 times for a line height of 3.25 is 1.625, and we set the bottom padding as 1.625ex. This demonstration underlines the importance of using settings that are relative to x-height, but also in view of panel FOUR, some fonts still need special consideration.

sample xxx xxxx XXX X HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Gurajada at 18.8px And the line-height here is set to 3.25ex. While the font size can not be directly set per x-height, at least the x-height is useable via the ex length. 1ex is one x-height. In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, over 3.25ex may be ideal for some fonts. xxx xxx(box is 3.25ex high)

For paragraph spacing, we want an additional minimum of 1.5 to 2.0 times the line-height. An extra 1.5 times for a line height of 3.25 is 1.625, and we set the bottom padding as 1.625ex. This demonstration underlines the importance of using settings that are relative to x-height, but also in view of panel FOUR, some fonts still need special consideration.

sample xxx xxxx XXX X HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Hina Mincho at 18.8px And the line-height here is set to 3.25ex. While the font size can not be directly set per x-height, at least the x-height is useable via the ex length. 1ex is one x-height. In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, over 3.25ex may be ideal for some fonts. xxx xxx(box is 3.25ex high)

For paragraph spacing, we want an additional minimum of 1.5 to 2.0 times the line-height. An extra 1.5 times for a line height of 3.25 is 1.625, and we set the bottom padding as 1.625ex. This demonstration underlines the importance of using settings that are relative to x-height, but also in view of panel FOUR, some fonts still need special consideration.

sample xxx xxxx XXX X HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Sorts Mill Goudy at 18.8px And the line-height here is set to 3.25ex. While the font size can not be directly set per x-height, at least the x-height is useable via the ex length. 1ex is one x-height. In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, over 3.25ex may be ideal for some fonts. xxx xxx(box is 3.25ex high)

For paragraph spacing, we want an additional minimum of 1.5 to 2.0 times the line-height. An extra 1.5 times for a line height of 3.25 is 1.625, and we set the bottom padding as 1.625ex. This demonstration underlines the importance of using settings that are relative to x-height, but also in view of panel FOUR, some fonts still need special consideration.

sample xxx xxxx XXX X HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Cormorant at 18.8px And the line-height here is set to 3.25ex. While the font size can not be directly set per x-height, at least the x-height is useable via the ex length. 1ex is one x-height. In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, over 3.25ex may be ideal for some fonts. xxx xxx(box is 3.25ex high)

For paragraph spacing, we want an additional minimum of 1.5 to 2.0 times the line-height. An extra 1.5 times for a line height of 3.25 is 1.625, and we set the bottom padding as 1.625ex. This demonstration underlines the importance of using settings that are relative to x-height, but also in view of panel FOUR, some fonts still need special consideration.

sample xxx xxxx XXX X HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Gidugu at 18.8px And the line-height here is set to 3.25ex. While the font size can not be directly set per x-height, at least the x-height is useable via the ex length. 1ex is one x-height. In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, over 3.25ex may be ideal for some fonts. xxx xxx(box is 3.25ex high)

For paragraph spacing, we want an additional minimum of 1.5 to 2.0 times the line-height. An extra 1.5 times for a line height of 3.25 is 1.625, and we set the bottom padding as 1.625ex. This demonstration underlines the importance of using settings that are relative to x-height, but also in view of panel FOUR, some fonts still need special consideration.

sample xxx xxxx XXX X HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Reem Kufi at 18.8px And the line-height here is set to 3.25ex. While the font size can not be directly set per x-height, at least the x-height is useable via the ex length. 1ex is one x-height. In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, over 3.25ex may be ideal for some fonts. xxx xxx(box is 3.25ex high)

For paragraph spacing, we want an additional minimum of 1.5 to 2.0 times the line-height. An extra 1.5 times for a line height of 3.25 is 1.625, and we set the bottom padding as 1.625ex. This demonstration underlines the importance of using settings that are relative to x-height, but also in view of panel FOUR, some fonts still need special consideration.

sample xxx xxxx XXX X HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Darker Grotesque at 18.8px And the line-height here is set to 3.25ex. While the font size can not be directly set per x-height, at least the x-height is useable via the ex length. 1ex is one x-height. In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, over 3.25ex may be ideal for some fonts. xxx xxx(box is 3.25ex high)

For paragraph spacing, we want an additional minimum of 1.5 to 2.0 times the line-height. An extra 1.5 times for a line height of 3.25 is 1.625, and we set the bottom padding as 1.625ex. This demonstration underlines the importance of using settings that are relative to x-height, but also in view of panel FOUR, some fonts still need special consideration.

sample xxx xxxx XXX X HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This font has crazy high ascenders, so line height 2.75ex is not enough!

This is the font Pompiere at 18.8px And the line-height here is set to 3.25ex. While the font size can not be directly set per x-height, at least the x-height is useable via the ex length. 1ex is one x-height. In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, over 3.25ex may be ideal for some fonts. xxx xxx(box is 3.25ex high)

For paragraph spacing, we want an additional minimum of 1.5 to 2.0 times the line-height. An extra 1.5 times for a line height of 3.25 is 1.625, and we set the bottom padding as 1.625ex. This demonstration underlines the importance of using settings that are relative to x-height, but also in view of panel FOUR, some fonts still need special consideration.

sample xxx xxxx XXX X HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

And some fonts are like this, the x as rendered isn't even close to the reported x-height.

This is the font Nanum Pen Script at 18.8px And the line-height here is set to 3.25ex. While the font size can not be directly set per x-height, at least the x-height is useable via the ex length. 1ex is one x-height. In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, over 3.25ex may be ideal for some fonts. xxx xxx(box is 3.25ex high)

For paragraph spacing, we want an additional minimum of 1.5 to 2.0 times the line-height. An extra 1.5 times for a line height of 3.25 is 1.625, and we set the bottom padding as 1.625ex. This demonstration underlines the importance of using settings that are relative to x-height, but also in view of panel FOUR, some fonts still need special consideration.

sample xxx xxxxx XXX X HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

Test Panel SIX:
Equalized x-Heights

This Panel -- Line Height at 3.25ex

NOTICE: Any samples displaying this font means they did not load correctly

All sample font sizes on this panel have an
equalized x-height of 9.94px (see also panel two)
In addition, line-height: is set to 3.25ex

The Helvetica reference is set so the Helvetica cap height
is equal to the x-height of the sample font above it

An x-height of 9.94px is close to the minimum critical size for best fluent readability for standard (20/20) vision, when accompanied by an ample contrast reserve, which has been defined as 20 times the threshold contrast sensitivity. There are other important readability factors though.

Font weight directly affects contrast perception, so heavier weight fonts have better contrast. Line and letter spacing also affects readability contrast, as well as "crowding"—increasing spacing improves contrast and reduces crowding.

With the x-height of 9.94px, and a line height of 3.25ex, the baseline to baseline distance is approx. 32.3px. An additional 1.625ex which here is 16.2px is added between paragraphs.

Things to notice: On this page, you'll see that the actual x-height of some fonts may differ from the x-height as indicated per the ex length unit. Also, while a line spacing of ~3ex is often good, some fonts have glyph characteristics that require a greater line spacing.


Begin Test Samples


This is the font Encode Sans SC at 16.72px which equalizes the x-heights on this page to 9.94px. The line-height for this page is set to 3.25ex. While font size can not be directly set per x-height, at least the x-height is useable via the CSS ex length unit. 1ex is the height of the lowercase x, however, as you can see from some examples on this page, that is not always correct.

In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, and over 3.25ex may be ideal for some fonts. xxx xxx(pink box is 3.25ex high)

For paragraph spacing, we want an additional 1.5ex to 2.0ex, or an extra 50% of the line-height. An extra 50% with a line height of 3.25 is 1.625, and we set the p{padding:1.625ex 0 0}. This demonstration underlines the importance of using settings that are relative to x-height.

sample xxx xxxx XXX X HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Peddana at 31.44px which equalizes the x-heights on this page to 9.94px. The line-height for this page is set to 3.25ex. While font size can not be directly set per x-height, at least the x-height is useable via the CSS ex length unit. 1ex is the height of the lowercase x, however, as you can see from some examples on this page, that is not always correct.

In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, and over 3.25ex may be ideal for some fonts. xxx xxx(pink box is 3.25ex high)

For paragraph spacing, we want an additional 1.5ex to 2.0ex, or an extra 50% of the line-height. An extra 50% with a line height of 3.25 is 1.625, and we set the p{padding:1.625ex 0 0}. This demonstration underlines the importance of using settings that are relative to x-height.

sample xxx xxxx XXX X HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Jaldi at 21.84px which equalizes the x-heights on this page to 9.94px. The line-height for this page is set to 3.25ex. While font size can not be directly set per x-height, at least the x-height is useable via the CSS ex length unit. 1ex is the height of the lowercase x, however, as you can see from some examples on this page, that is not always correct.

In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, and over 3.25ex may be ideal for some fonts. xxx xxx(pink box is 3.25ex high)

For paragraph spacing, we want an additional 1.5ex to 2.0ex, or an extra 50% of the line-height. An extra 50% with a line height of 3.25 is 1.625, and we set the p{padding:1.625ex 0 0}. This demonstration underlines the importance of using settings that are relative to x-height.

sample xxx xxxx XXX X HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Teko at 20.4px which equalizes the x-heights on this page to 9.94px. The line-height for this page is set to 3.25ex. While font size can not be directly set per x-height, at least the x-height is useable via the CSS ex length unit. 1ex is the height of the lowercase x, however, as you can see from some examples on this page, that is not always correct.

In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, and over 3.25ex may be ideal for some fonts. xxx xxx(pink box is 3.25ex high)

For paragraph spacing, we want an additional 1.5ex to 2.0ex, or an extra 50% of the line-height. An extra 50% with a line height of 3.25 is 1.625, and we set the p{padding:1.625ex 0 0}. This demonstration underlines the importance of using settings that are relative to x-height.

sample xxx xxxx XXX X HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Josefin Sans at 24.04px which equalizes the x-heights on this page to 9.94px. The line-height for this page is set to 3.25ex. While font size can not be directly set per x-height, at least the x-height is useable via the CSS ex length unit. 1ex is the height of the lowercase x, however, as you can see from some examples on this page, that is not always correct.

In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, and over 3.25ex may be ideal for some fonts. xxx xxx(pink box is 3.25ex high)

For paragraph spacing, we want an additional 1.5ex to 2.0ex, or an extra 50% of the line-height. An extra 50% with a line height of 3.25 is 1.625, and we set the p{padding:1.625ex 0 0}. This demonstration underlines the importance of using settings that are relative to x-height.

sample xxx xxxx XXX X HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Kanit at 20.96px which equalizes the x-heights on this page to 9.94px. The line-height for this page is set to 3.25ex. While font size can not be directly set per x-height, at least the x-height is useable via the CSS ex length unit. 1ex is the height of the lowercase x, however, as you can see from some examples on this page, that is not always correct.

In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, and over 3.25ex may be ideal for some fonts. xxx xxx(pink box is 3.25ex high)

For paragraph spacing, we want an additional 1.5ex to 2.0ex, or an extra 50% of the line-height. An extra 50% with a line height of 3.25 is 1.625, and we set the p{padding:1.625ex 0 0}. This demonstration underlines the importance of using settings that are relative to x-height.

sample xxx xxxx XXX X HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Chathura at 33.84px which equalizes the x-heights on this page to 9.94px. The line-height for this page is set to 3.25ex. While font size can not be directly set per x-height, at least the x-height is useable via the CSS ex length unit. 1ex is the height of the lowercase x, however, as you can see from some examples on this page, that is not always correct.

In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, and over 3.25ex may be ideal for some fonts. xxx xxx(pink box is 3.25ex high)

For paragraph spacing, we want an additional 1.5ex to 2.0ex, or an extra 50% of the line-height. An extra 50% with a line height of 3.25 is 1.625, and we set the p{padding:1.625ex 0 0}. This demonstration underlines the importance of using settings that are relative to x-height.

sample xxx xxxx XXX X HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Kumbh Sans at 20.32px which equalizes the x-heights on this page to 9.94px. The line-height for this page is set to 3.25ex. While font size can not be directly set per x-height, at least the x-height is useable via the CSS ex length unit. 1ex is the height of the lowercase x, however, as you can see from some examples on this page, that is not always correct.

In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, and over 3.25ex may be ideal for some fonts. xxx xxx(pink box is 3.25ex high)

For paragraph spacing, we want an additional 1.5ex to 2.0ex, or an extra 50% of the line-height. An extra 50% with a line height of 3.25 is 1.625, and we set the p{padding:1.625ex 0 0}. This demonstration underlines the importance of using settings that are relative to x-height.

sample xxx xxxx XXX X HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Orbitron at 17.12px which equalizes the x-heights on this page to 9.94px. The line-height for this page is set to 3.25ex. While font size can not be directly set per x-height, at least the x-height is useable via the CSS ex length unit. 1ex is the height of the lowercase x, however, as you can see from some examples on this page, that is not always correct.

In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, and over 3.25ex may be ideal for some fonts. xxx xxx(pink box is 3.25ex high)

For paragraph spacing, we want an additional 1.5ex to 2.0ex, or an extra 50% of the line-height. An extra 50% with a line height of 3.25 is 1.625, and we set the p{padding:1.625ex 0 0}. This demonstration underlines the importance of using settings that are relative to x-height.

sample xxx xxxx XXX X HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Spartan at 19.44px which equalizes the x-heights on this page to 9.94px. The line-height for this page is set to 3.25ex. While font size can not be directly set per x-height, at least the x-height is useable via the CSS ex length unit. 1ex is the height of the lowercase x, however, as you can see from some examples on this page, that is not always correct.

In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, and over 3.25ex may be ideal for some fonts. xxx xxx(pink box is 3.25ex high)

For paragraph spacing, we want an additional 1.5ex to 2.0ex, or an extra 50% of the line-height. An extra 50% with a line height of 3.25 is 1.625, and we set the p{padding:1.625ex 0 0}. This demonstration underlines the importance of using settings that are relative to x-height.

sample xxx xxxx XXX X HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Gurajada at 30.32px which equalizes the x-heights on this page to 9.94px. The line-height for this page is set to 3.25ex. While font size can not be directly set per x-height, at least the x-height is useable via the CSS ex length unit. 1ex is the height of the lowercase x, however, as you can see from some examples on this page, that is not always correct.

In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, and over 3.25ex may be ideal for some fonts. xxx xxx(pink box is 3.25ex high)

For paragraph spacing, we want an additional 1.5ex to 2.0ex, or an extra 50% of the line-height. An extra 50% with a line height of 3.25 is 1.625, and we set the p{padding:1.625ex 0 0}. This demonstration underlines the importance of using settings that are relative to x-height.

sample xxx xxxx XXX X HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Hina Mincho at 26.16px which equalizes the x-heights on this page to 9.94px. The line-height for this page is set to 3.25ex. While font size can not be directly set per x-height, at least the x-height is useable via the CSS ex length unit. 1ex is the height of the lowercase x, however, as you can see from some examples on this page, that is not always correct.

In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, and over 3.25ex may be ideal for some fonts. xxx xxx(pink box is 3.25ex high)

For paragraph spacing, we want an additional 1.5ex to 2.0ex, or an extra 50% of the line-height. An extra 50% with a line height of 3.25 is 1.625, and we set the p{padding:1.625ex 0 0}. This demonstration underlines the importance of using settings that are relative to x-height.

sample xxx xxxx XXX X HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Sorts Mill Goudy at 23.36px which equalizes the x-heights on this page to 9.94px. The line-height for this page is set to 3.25ex. While font size can not be directly set per x-height, at least the x-height is useable via the CSS ex length unit. 1ex is the height of the lowercase x, however, as you can see from some examples on this page, that is not always correct.

In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, and over 3.25ex may be ideal for some fonts. xxx xxx(pink box is 3.25ex high)

For paragraph spacing, we want an additional 1.5ex to 2.0ex, or an extra 50% of the line-height. An extra 50% with a line height of 3.25 is 1.625, and we set the p{padding:1.625ex 0 0}. This demonstration underlines the importance of using settings that are relative to x-height.

sample xxx xxxx XXX X HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Cormorant at 25.76px which equalizes the x-heights on this page to 9.94px. The line-height for this page is set to 3.25ex. While font size can not be directly set per x-height, at least the x-height is useable via the CSS ex length unit. 1ex is the height of the lowercase x, however, as you can see from some examples on this page, that is not always correct.

In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, and over 3.25ex may be ideal for some fonts. xxx xxx(pink box is 3.25ex high)

For paragraph spacing, we want an additional 1.5ex to 2.0ex, or an extra 50% of the line-height. An extra 50% with a line height of 3.25 is 1.625, and we set the p{padding:1.625ex 0 0}. This demonstration underlines the importance of using settings that are relative to x-height.

sample xxx xxxx XXX X HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Gidugu at 31.04px which equalizes the x-heights on this page to 9.94px. The line-height for this page is set to 3.25ex. While font size can not be directly set per x-height, at least the x-height is useable via the CSS ex length unit. 1ex is the height of the lowercase x, however, as you can see from some examples on this page, that is not always correct.

In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, and over 3.25ex may be ideal for some fonts. xxx xxx(pink box is 3.25ex high)

For paragraph spacing, we want an additional 1.5ex to 2.0ex, or an extra 50% of the line-height. An extra 50% with a line height of 3.25 is 1.625, and we set the p{padding:1.625ex 0 0}. This demonstration underlines the importance of using settings that are relative to x-height.

sample xxx xxxx XXX X HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Reem Kufi at 23.8px which equalizes the x-heights on this page to 9.94px. The line-height for this page is set to 3.25ex. While font size can not be directly set per x-height, at least the x-height is useable via the CSS ex length unit. 1ex is the height of the lowercase x, however, as you can see from some examples on this page, that is not always correct.

In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, and over 3.25ex may be ideal for some fonts. xxx xxx(pink box is 3.25ex high)

For paragraph spacing, we want an additional 1.5ex to 2.0ex, or an extra 50% of the line-height. An extra 50% with a line height of 3.25 is 1.625, and we set the p{padding:1.625ex 0 0}. This demonstration underlines the importance of using settings that are relative to x-height.

sample xxx xxxx XXX X HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Darker Grotesque at 24.48px which equalizes the x-heights on this page to 9.94px. The line-height for this page is set to 3.25ex. While font size can not be directly set per x-height, at least the x-height is useable via the CSS ex length unit. 1ex is the height of the lowercase x, however, as you can see from some examples on this page, that is not always correct.

In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, and over 3.25ex may be ideal for some fonts. xxx xxx(pink box is 3.25ex high)

For paragraph spacing, we want an additional 1.5ex to 2.0ex, or an extra 50% of the line-height. An extra 50% with a line height of 3.25 is 1.625, and we set the p{padding:1.625ex 0 0}. This demonstration underlines the importance of using settings that are relative to x-height.

sample xxx xxxx XXX X HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Pompiere at 26.64px which equalizes the x-heights on this page to 9.94px. The line-height for this page is set to 3.25ex. While font size can not be directly set per x-height, at least the x-height is useable via the CSS ex length unit. 1ex is the height of the lowercase x, however, as you can see from some examples on this page, that is not always correct.

In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, and over 3.25ex may be ideal for some fonts. xxx xxx(pink box is 3.25ex high)

For paragraph spacing, we want an additional 1.5ex to 2.0ex, or an extra 50% of the line-height. An extra 50% with a line height of 3.25 is 1.625, and we set the p{padding:1.625ex 0 0}. This demonstration underlines the importance of using settings that are relative to x-height.

sample xxx xxxx XXX X HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Nanum Pen Script at 20.64px which equalizes the x-heights on this page to 9.94px. The line-height for this page is set to 3.25ex. While font size can not be directly set per x-height, at least the x-height is useable via the CSS ex length unit. 1ex is the height of the lowercase x, however, as you can see from some examples on this page, that is not always correct.

In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, and over 3.25ex may be ideal for some fonts. xxx xxx(pink box is 3.25ex high)

For paragraph spacing, we want an additional 1.5ex to 2.0ex, or an extra 50% of the line-height. An extra 50% with a line height of 3.25 is 1.625, and we set the p{padding:1.625ex 0 0}. This demonstration underlines the importance of using settings that are relative to x-height.

sample xxx xxxx XXX X HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

Test Panel SEVEN:
Equalized x-Heights

This Panel -- Line Height at 3.25px

NOTICE: Any samples displaying this font means they did not load correctly

All sample font sizes on this panel are set with
an equalized x-height of 7.45px (see also panel two)
in addition, line-height: is set to 3.25ex

The Helvetica reference is set so the Helvetica cap height
is equal to the x-height of the sample font above it.

An x-height of 7.45px is BELOW the minimum critical size for best fluent readability for standard (20/20) vision, even when accompanied by an ample contrast reserve. There are other important readability factors as well.

Font weight directly affects contrast perception, so heavier weight fonts have better contrast. Line and letter spacing also affects readability contrast, as well as "crowding"—increasing spacing improves contrast and reduces crowding.

Notice the very different font sizes (in px), as all fonts are set for an x-height of 7.45px, and a line height of 3.25ex. The baseline to baseline distance is approx. 23.2px. An additional 1.625ex which here is 12px is added between paragraphs.

Things to notice: On this page, you'll see that the actual x-height of some fonts may differ from the x-height as indicated per the ex length unit. Also, while a line spacing of ~3ex is often good, some fonts have glyph characteristics that require a greater line spacing.


Begin Test Samples


This is the font Encode Sans SC at 12.54px which equalizes the x-heights on this page to 7.45px. The line-height for this page is set to 3.25ex. While font size can not be directly set per x-height, at least the x-height is useable via the CSS ex length unit. 1ex is the height of the lowercase x, however, as you can see from some examples on this page, that is not always correct.

In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, and over 3.25ex may be ideal for some fonts. xxx xxx(pink box is 3.25ex high)

For paragraph spacing, we want an additional 1.5ex to 2.0ex, or an extra 50% of the line-height. An extra 50% with a line height of 3.25 is 1.625, and we set the p{padding:1.625ex 0 0}. This demonstration underlines the importance of using settings that are relative to x-height.

sample xxx xxxx XXX X HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Peddana at 23.58px which equalizes the x-heights on this page to 7.45px. The line-height for this page is set to 3.25ex. While font size can not be directly set per x-height, at least the x-height is useable via the CSS ex length unit. 1ex is the height of the lowercase x, however, as you can see from some examples on this page, that is not always correct.

In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, and over 3.25ex may be ideal for some fonts. xxx xxx(pink box is 3.25ex high)

For paragraph spacing, we want an additional 1.5ex to 2.0ex, or an extra 50% of the line-height. An extra 50% with a line height of 3.25 is 1.625, and we set the p{padding:1.625ex 0 0}. This demonstration underlines the importance of using settings that are relative to x-height.

sample xxx xxxx XXX X HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Jaldi at 16.38px which equalizes the x-heights on this page to 7.45px. The line-height for this page is set to 3.25ex. While font size can not be directly set per x-height, at least the x-height is useable via the CSS ex length unit. 1ex is the height of the lowercase x, however, as you can see from some examples on this page, that is not always correct.

In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, and over 3.25ex may be ideal for some fonts. xxx xxx(pink box is 3.25ex high)

For paragraph spacing, we want an additional 1.5ex to 2.0ex, or an extra 50% of the line-height. An extra 50% with a line height of 3.25 is 1.625, and we set the p{padding:1.625ex 0 0}. This demonstration underlines the importance of using settings that are relative to x-height.

sample xxx xxxx XXX X HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Teko at 15.3px which equalizes the x-heights on this page to 7.45px. The line-height for this page is set to 3.25ex. While font size can not be directly set per x-height, at least the x-height is useable via the CSS ex length unit. 1ex is the height of the lowercase x, however, as you can see from some examples on this page, that is not always correct.

In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, and over 3.25ex may be ideal for some fonts. xxx xxx(pink box is 3.25ex high)

For paragraph spacing, we want an additional 1.5ex to 2.0ex, or an extra 50% of the line-height. An extra 50% with a line height of 3.25 is 1.625, and we set the p{padding:1.625ex 0 0}. This demonstration underlines the importance of using settings that are relative to x-height.

sample xxx xxxx XXX X HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Josefin Sans at 18.03px which equalizes the x-heights on this page to 7.45px. The line-height for this page is set to 3.25ex. While font size can not be directly set per x-height, at least the x-height is useable via the CSS ex length unit. 1ex is the height of the lowercase x, however, as you can see from some examples on this page, that is not always correct.

In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, and over 3.25ex may be ideal for some fonts. xxx xxx(pink box is 3.25ex high)

For paragraph spacing, we want an additional 1.5ex to 2.0ex, or an extra 50% of the line-height. An extra 50% with a line height of 3.25 is 1.625, and we set the p{padding:1.625ex 0 0}. This demonstration underlines the importance of using settings that are relative to x-height.

sample xxx xxxx XXX X HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Kanit at 15.72px which equalizes the x-heights on this page to 7.45px. The line-height for this page is set to 3.25ex. While font size can not be directly set per x-height, at least the x-height is useable via the CSS ex length unit. 1ex is the height of the lowercase x, however, as you can see from some examples on this page, that is not always correct.

In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, and over 3.25ex may be ideal for some fonts. xxx xxx(pink box is 3.25ex high)

For paragraph spacing, we want an additional 1.5ex to 2.0ex, or an extra 50% of the line-height. An extra 50% with a line height of 3.25 is 1.625, and we set the p{padding:1.625ex 0 0}. This demonstration underlines the importance of using settings that are relative to x-height.

sample xxx xxxx XXX X HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Chathura at 25.38px which equalizes the x-heights on this page to 7.45px. The line-height for this page is set to 3.25ex. While font size can not be directly set per x-height, at least the x-height is useable via the CSS ex length unit. 1ex is the height of the lowercase x, however, as you can see from some examples on this page, that is not always correct.

In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, and over 3.25ex may be ideal for some fonts. xxx xxx(pink box is 3.25ex high)

For paragraph spacing, we want an additional 1.5ex to 2.0ex, or an extra 50% of the line-height. An extra 50% with a line height of 3.25 is 1.625, and we set the p{padding:1.625ex 0 0}. This demonstration underlines the importance of using settings that are relative to x-height.

sample xxx xxxx XXX X HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Kumbh Sans at 15.24px which equalizes the x-heights on this page to 7.45px. The line-height for this page is set to 3.25ex. While font size can not be directly set per x-height, at least the x-height is useable via the CSS ex length unit. 1ex is the height of the lowercase x, however, as you can see from some examples on this page, that is not always correct.

In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, and over 3.25ex may be ideal for some fonts. xxx xxx(pink box is 3.25ex high)

For paragraph spacing, we want an additional 1.5ex to 2.0ex, or an extra 50% of the line-height. An extra 50% with a line height of 3.25 is 1.625, and we set the p{padding:1.625ex 0 0}. This demonstration underlines the importance of using settings that are relative to x-height.

sample xxx xxxx XXX X HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Orbitron at 12.84px which equalizes the x-heights on this page to 7.45px. The line-height for this page is set to 3.25ex. While font size can not be directly set per x-height, at least the x-height is useable via the CSS ex length unit. 1ex is the height of the lowercase x, however, as you can see from some examples on this page, that is not always correct.

In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, and over 3.25ex may be ideal for some fonts. xxx xxx(pink box is 3.25ex high)

For paragraph spacing, we want an additional 1.5ex to 2.0ex, or an extra 50% of the line-height. An extra 50% with a line height of 3.25 is 1.625, and we set the p{padding:1.625ex 0 0}. This demonstration underlines the importance of using settings that are relative to x-height.

sample xxx xxxx XXX X HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Spartan at 14.58px which equalizes the x-heights on this page to 7.45px. The line-height for this page is set to 3.25ex. While font size can not be directly set per x-height, at least the x-height is useable via the CSS ex length unit. 1ex is the height of the lowercase x, however, as you can see from some examples on this page, that is not always correct.

In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, and over 3.25ex may be ideal for some fonts. xxx xxx(pink box is 3.25ex high)

For paragraph spacing, we want an additional 1.5ex to 2.0ex, or an extra 50% of the line-height. An extra 50% with a line height of 3.25 is 1.625, and we set the p{padding:1.625ex 0 0}. This demonstration underlines the importance of using settings that are relative to x-height.

sample xxx xxxx XXX X HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Gurajada at 22.74px which equalizes the x-heights on this page to 7.45px. The line-height for this page is set to 3.25ex. While font size can not be directly set per x-height, at least the x-height is useable via the CSS ex length unit. 1ex is the height of the lowercase x, however, as you can see from some examples on this page, that is not always correct.

In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, and over 3.25ex may be ideal for some fonts. xxx xxx(pink box is 3.25ex high)

For paragraph spacing, we want an additional 1.5ex to 2.0ex, or an extra 50% of the line-height. An extra 50% with a line height of 3.25 is 1.625, and we set the p{padding:1.625ex 0 0}. This demonstration underlines the importance of using settings that are relative to x-height.

sample xxx xxxx XXX X HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Hina Mincho at 19.62px which equalizes the x-heights on this page to 7.45px. The line-height for this page is set to 3.25ex. While font size can not be directly set per x-height, at least the x-height is useable via the CSS ex length unit. 1ex is the height of the lowercase x, however, as you can see from some examples on this page, that is not always correct.

In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, and over 3.25ex may be ideal for some fonts. xxx xxx(pink box is 3.25ex high)

For paragraph spacing, we want an additional 1.5ex to 2.0ex, or an extra 50% of the line-height. An extra 50% with a line height of 3.25 is 1.625, and we set the p{padding:1.625ex 0 0}. This demonstration underlines the importance of using settings that are relative to x-height.

sample xxx xxxx XXX X HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Sorts Mill Goudy at 17.52px which equalizes the x-heights on this page to 7.45px. The line-height for this page is set to 3.25ex. While font size can not be directly set per x-height, at least the x-height is useable via the CSS ex length unit. 1ex is the height of the lowercase x, however, as you can see from some examples on this page, that is not always correct.

In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, and over 3.25ex may be ideal for some fonts. xxx xxx(pink box is 3.25ex high)

For paragraph spacing, we want an additional 1.5ex to 2.0ex, or an extra 50% of the line-height. An extra 50% with a line height of 3.25 is 1.625, and we set the p{padding:1.625ex 0 0}. This demonstration underlines the importance of using settings that are relative to x-height.

sample xxx xxxx XXX X HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Cormorant at 19.32px which equalizes the x-heights on this page to 7.45px. The line-height for this page is set to 3.25ex. While font size can not be directly set per x-height, at least the x-height is useable via the CSS ex length unit. 1ex is the height of the lowercase x, however, as you can see from some examples on this page, that is not always correct.

In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, and over 3.25ex may be ideal for some fonts. xxx xxx(pink box is 3.25ex high)

For paragraph spacing, we want an additional 1.5ex to 2.0ex, or an extra 50% of the line-height. An extra 50% with a line height of 3.25 is 1.625, and we set the p{padding:1.625ex 0 0}. This demonstration underlines the importance of using settings that are relative to x-height.

sample xxx xxxx XXX X HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Gidugu at 23.28px which equalizes the x-heights on this page to 7.45px. The line-height for this page is set to 3.25ex. While font size can not be directly set per x-height, at least the x-height is useable via the CSS ex length unit. 1ex is the height of the lowercase x, however, as you can see from some examples on this page, that is not always correct.

In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, and over 3.25ex may be ideal for some fonts. xxx xxx(pink box is 3.25ex high)

For paragraph spacing, we want an additional 1.5ex to 2.0ex, or an extra 50% of the line-height. An extra 50% with a line height of 3.25 is 1.625, and we set the p{padding:1.625ex 0 0}. This demonstration underlines the importance of using settings that are relative to x-height.

sample xxx xxxx XXX X HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Reem Kufi at 17.85px which equalizes the x-heights on this page to 7.45px. The line-height for this page is set to 3.25ex. While font size can not be directly set per x-height, at least the x-height is useable via the CSS ex length unit. 1ex is the height of the lowercase x, however, as you can see from some examples on this page, that is not always correct.

In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, and over 3.25ex may be ideal for some fonts. xxx xxx(pink box is 3.25ex high)

For paragraph spacing, we want an additional 1.5ex to 2.0ex, or an extra 50% of the line-height. An extra 50% with a line height of 3.25 is 1.625, and we set the p{padding:1.625ex 0 0}. This demonstration underlines the importance of using settings that are relative to x-height.

sample xxx xxxx XXX X HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Darker Grotesque at 18.36px which equalizes the x-heights on this page to 7.45px. The line-height for this page is set to 3.25ex. While font size can not be directly set per x-height, at least the x-height is useable via the CSS ex length unit. 1ex is the height of the lowercase x, however, as you can see from some examples on this page, that is not always correct.

In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, and over 3.25ex may be ideal for some fonts. xxx xxx(pink box is 3.25ex high)

For paragraph spacing, we want an additional 1.5ex to 2.0ex, or an extra 50% of the line-height. An extra 50% with a line height of 3.25 is 1.625, and we set the p{padding:1.625ex 0 0}. This demonstration underlines the importance of using settings that are relative to x-height.

sample xxx xxxx XXX X HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Pompiere at 19.98px which equalizes the x-heights on this page to 7.45px. The line-height for this page is set to 3.25ex. While font size can not be directly set per x-height, at least the x-height is useable via the CSS ex length unit. 1ex is the height of the lowercase x, however, as you can see from some examples on this page, that is not always correct.

In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, and over 3.25ex may be ideal for some fonts. xxx xxx(pink box is 3.25ex high)

For paragraph spacing, we want an additional 1.5ex to 2.0ex, or an extra 50% of the line-height. An extra 50% with a line height of 3.25 is 1.625, and we set the p{padding:1.625ex 0 0}. This demonstration underlines the importance of using settings that are relative to x-height.

sample xxx xxxx XXX X HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

This is the font Nanum Pen Script at 15.48px which equalizes the x-heights on this page to 7.45px. The line-height for this page is set to 3.25ex. While font size can not be directly set per x-height, at least the x-height is useable via the CSS ex length unit. 1ex is the height of the lowercase x, however, as you can see from some examples on this page, that is not always correct.

In traditional typography, the minimum leading is often 2.25 times the x-height, to save paper. But readability can be improved on screen by setting the line height no less than 2.5ex, and over 3.25ex may be ideal for some fonts. xxx xxx(pink box is 3.25ex high)

For paragraph spacing, we want an additional 1.5ex to 2.0ex, or an extra 50% of the line-height. An extra 50% with a line height of 3.25 is 1.625, and we set the p{padding:1.625ex 0 0}. This demonstration underlines the importance of using settings that are relative to x-height.

sample xxx xxxx XXX X HELVETICA with CAP-HEIGHT SET to X-HEIGHT of ABOVE FONT
    x-height ATH    
  x-ht font-size inspector • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • X 

Monitor gamma check

sRGB gamma target. Ideally the targets appear uniform (i.e. the thick border looks the same as the inner grid). It is important that the image be at 100% and not scaled - make sure your browser says "actual size".

These gamma targets require a 2:1 retina display.

Target #96 (2.6)
Target #c3 (2.6)
Target #e4 (2.6)
Target #93 (2.5)
Target #c1 (2.5)
Target #e3 (2.5)
Target #8f (2.4)
Target #BF (2.4)
Target #e2 (2.4)
Target #88 (2.2)
Target #ba (2.2)
Target #e0 (2.2)