Contrast Arising from Text Spatial Frequency

[Myndex]

The critical spatial frequency modulator as it affects contrast perception is the font weight. Size is the factor for acuity more than contrast per se, but size affects contrast in that it affects the rasterized stroke width for the given weight. This is interrelated to glyph design characteristics, then letter and line spacing, and finally layout, in terms of spatial frequency importance as the main driver of contrast of text.

UPDATED: Jun 19, 2023

Note: previous version had some incorrect cpd values pasted from a worksheet.

Contrast Arising from Text Spatial Frequency

Order of importance:

1. Weight (normalized per reference)
2. Size (normalized per reference)
3. Glyph design (i.e. serif, sans, aspect etc. strongly interrelated to weight and size)
4. Letter spacing (kerning and tracking, relative to glyph characteristics)
5. Line spacing (leading, relative to x-height for Latin writing systems)
6. Justification (aligned to entry point, I.e. for L to R, aligh left)
7. Other contextual factors such as padding and proximal surround (driving light adaptation) and other contrast adaptation factors will vary in importance depending on the specifics.

Spatial Cases

The spatial frequency band we are most often concerned with is about 10cpd to 20cpd, as far as the stroke width (font weight) is concerned (or line thickness). Note this is separate from the font size, and font size is important for acuity.

• Font Size accommodates acuity, followed by Font Weight.
• Font Weight accommodates contrast sensitivity, followed by luminance difference.
• Proper spacing (leading/kerning/tracking) helps accommodate contrast sensitivity, acuity, and also cognitive aspects of readability.
• One CSS px is 1.278 arc minutes of visual angle at reference view distance
  • 60 arc min in one degree or
  • 46.948px per degree (we round to 47 for simplicity)
• One cycle is a pair of one ON and the adjacent one OFF.
  • 20 cycles then is 10 on interleaved with 10 off.
  • 20 cycles per degree (cpd) is 3 arc minute per cycle, 1.5 arcmin per half cycle
• We assume the reference normal weight font x-height occupies 2.5 cycles vertically,
  • with a major stroke width of 0.5 cycles (font weight).
    • Typically, this is equivalent to a semi bold, between 500 and 600.
  • an x-height ratio of 0.52 (Helvetica)

Then these spatial frequencies relate to font size as:

• 47 / (cpd / 2.5) = x height in px / 0.52 = reference font size.
  • cpd/2.5 = x-heights per degree (xpd)
  • stroke of 0.5 cycle (font weight)
  • 60/xpd = x-height in arc minutes
  • 47/xpd = x-height in CSS px
  • x-height/0.52 = reference font-size
• At a frequency of 24cpd, that is 10.6 arc minutes or an 8.3px x-height. (About 16px Helvetica)
• At 12cpd, that is 16 arc minutes or 12.5px x-height. (About 24px Helvetica)

ACUITY SIZE: The consensus (Legge, et alia) on "best fluent critical size range" for text is 0.2° to 2.0°, and at reference view distance 0.2° equates to an x-height of about 9.4px, (12') which is roughly an 18px font (Helvetica).

In the example CS chart below, sizes used are approximately:

• 76px Bold (Large Headline), roughly 2cpd
• 34px Ultra Bold (Medium Heading), roughly 4cpd,
• 28px Bold (Small Tertiary heading) 5cpd
• 22px Semi-Bold 7cpd, 16px Light 16cpd, 12px Light 34cpd.

At threshold, the CS curve indicates that the difference between 20cpd and 7cpd is an order of magnitude in terms of contrast sensitivity. 30cpd to 15cpd is also an order of magnitude in contrast sensitivity. In other words, this implies that the difference between 24px and 14px is that 14px has 10 times lower contrast sensitivity than 24px.

To be clear, this is not considering the acuity aspect, only the contrast aspect. Also, this curve is at threshold—the curve shape changes and flattens as we move to supra-threshold, and further, various impairments alter the shape and tend to shift the CS curve to the left.

The chart attempts to simplify the understanding—reality is much more nuanced and complicated. Simple linear math is not entirely accurate here, but as a thumbnail understanding, it's useful for practical purposes.

1. The pink lines on the chart are not quite in the correct locations, it is a draft.
2. Please note that actual font layouts are not defined as a single spatial frequency, but are irregular—here we round for simplicity and illustration purposes.
3. Also, fonts are not sine gratings, fonts have hard edges (antialiasing notwithstanding) so even as the spatial frequency goes lower the hard edge remains higher at the same time—however for our purposes, which is practical design guidelines, we're weighting for the lower frequency being dominant).

Isolated Weight Example

The weight of the font is what really determines the cycles per degree.
Here are different weights from 300 to 700 for a reference font at 18px for all weights.

300	400	500	600	700
1.0px	1.38px	1.75px	2.25px	2.63px
23.5cpd	17cpd	13.4cpd	10.4cpd	9cpd
Lc 105	Lc 75	Lc 70	Lc 60	Lc 55

^{Stroke width & cpd for various weights for 18px reference font}

0.2° at reference view distance & font-size 18
Parity stroke of 0.5 cycle is 1.88px, i.e. semibold, between 500/600

12 arc min / 1.278 = 9.4px / 0.52 = 18px font-size
60 / (12 arc min / 5 * 2) = 12.5 cpd (2.4′ stroke 1.88px)

---

SideBar: Comparisons to other contrast maths

There have been some contrast math comparisons that are using a misleading technique. When we get to very bold fonts, the spatial frequency becomes low enough that the text will fall into the contrast constancy range, and as a result important differences between contrast metrics will be obscured. You can not use a larger BOLD font, far above minimums, and hope to honestly demonstrate the functioning of a visual contrast metric.

Comparing different contrast maths needs to be done using the appropriate minimum font weight/size or line thickness.

The typical font weight used for readable body text today is commonly 400 or less, some poor designs as thin as 200. (I recommend 500, but is font dependent). The thresholds for columns of body text are the most critical, and therefore form the key nexus point for APCA based readability guidelines.

It is for this reason that the APCA tool uses blocks of sample text for demonstration purposes.

Using larger and BOLD fonts for example, shoves the spatial frequency to the left so far on the CS curve, it approaches or enters the contrast constancy zone. Using contrasts in the contrast-constancy zone for comparisons is spurious and meaningless. We literally do not care much about measuring contrast once we are so far above critical contrasts. But we DO very much care about contrasts near the critical point, for a given use case and font weight/size.

---

Minutiae

x-heights in px

5 arc min / 1.278 = 3.9px x-ht / 0.52 = 7.5px font-size
60 / (5 arc min / 5 * 2) = 30 cpd (1′ stroke 0.78px)

10 arc min / 1.278 = 7.825px x-ht / 0.52 = 15px font-size
60 / (10 arc min / 5 * 2) = 15 cpd (2′ stroke 1.56px)

12.5 arc min / 1.278 = 9.775px x-ht / 0.52 = 18.8px font-size
60 / (12.5 arc min / 5 * 2) = 12 cpd (2.5′ stroke 1.96px)

15 arc min / 1.278 = 11.737px x-ht / 0.52 = 22.5px font-size
60 / (15 arc min / 5 * 2) = 10 cpd (3′ stroke 2.35px) 

300	400	500	600	700
1px	1.38px	1.75px	2.25px	2.63px
23.5cpd	17cpd	13.4cpd	10.4cpd	9cpd
Lc 105	Lc 75	Lc 70	Lc 60	Lc 55

Other Key Understandings

x-height marks the spot

For bicameral scripts (i.e. upper/lower case: Latin, Greek, Cyrillic, Armenian), It actually depends more on the x-height, and x-height is very inconsistent relative to the font-size: among various font families. Unfortunately, CSS still does not have a stable, usable way to set fonts by their x-height directly, so this makes specifying a guideline challenging.

For instance, 14px Verdana has the same x-height as 17px Times New Roman, so 14px Times New Roman is like 11.5px Verdana.

It should be obvious that the font family chosen is a substantial determining factor on what the actual minimum size can be. This also extends to font weight. However we stand at the point where the technology is not where we need it to be, as there is no consistency among font families for size and weight and lacking usable CSS properties to address these issues.

The way we are mitigating this right now for APCA, is by comparing to reference fonts. There's some draft guidance on how to do that: Fonts & APCA reference alignment

Because this is an added level of complexity, reference alignment is not part of the requirements for the BRONZE level.

​

Visual angle is what you wrangle

When I said it's about x-height, even that is not the underlying fundamental measure. What is actually important is the size of the text as focused by the eye, which we measure as the visual angle subtended onto the retina.

​

For standard 20/20 visual acuity, the critical visual angle (VA) for text for fluent readability¹, is a range from 0.2° to 2° VA² There are 60 arc minutes in 1°, and the CSS reference px³ is defined as 1.278 minutes of arc. (See chart)

• x-height = (60 * 0.2) / 1.278 = 9.4px
  • 9.4px / 1.333 = 7pt

Obviously this translates to a different font-size: depending on the font family's x-height ratio:

9.4px x-height (7pt) is:

font-family:	x ratio	font-size (CSS px)	print (pt)
Verdana	0.55	17px	12.8pt
Helvetica	0.52	18px	13.5pt
Times	0.45	21px	15.65pt

REFERENCE FONTS: For the purposes of mathematical convenience and ease of use we might want to use a reference font for purpose of defining minimums, for the sake of developing reasonable guidelines:

8.0px x-height (6pt):

font-family:	x ratio	font-size (CSS px)	print (pt)
REFERENCE	0.5	16px	12pt
REFERENCE —Sans	0.52	15.4px	11.5pt
REFERENCE —Serif	0.45	17.8px	13.3pt
^((these reference fonts are still a work in progress)****)

​

Pushing the minimums below fluent readability:

7.0px x-height (5.25pt):

font-family:	x ratio	font-size (CSS px)	print (pt)
Verdana	0.55	12.8px	9.6pt
Helvetica	0.52	13.5px	10.1pt
REFERENCE	0.5	14px	10.5pt
Times	0.45	15.6px	11.7pt

​

The bare minimum for 20/20:

3.9px x-height (2.9pt):

font-family:	x ratio	font-size (CSS px)	print (pt)
Verdana	0.55	7px	5.3pt
Helvetica	0.52	7.5px	5.6pt
REFERENCE	0.5	7.8px	5.8pt
Times	0.45	8.7px	6.5pt

^((For 20/20 vision, the minimum acuity x-height at reference distance is 3.9px))

So this last example is the minimum size expected for somebody with 20/20 standard vision to barely be able to make out the letters at the reference viewing distance, where 1px is 1.278 arc minutes.

​

My point with all of this is that 14px is below fluent readability and should not be used for body text, though with enough contrast 14px can be used for things that are only "spot readable" or sub-fluent.

It does depend on the specific font family being used. If we're talking about good UX, we're talking about a good balance between the readability of the text and the crowding of the user elements.

User Personalization: And here keep in mind that users such as myself, are very likely to have their base iOS font size substantially higher than the default.

Hopefully an app recognizes this. This creates a consideration for the designer to ensure that when people enlarge the font-size that the app elements do not become crowded, and/or the most important text does not get truncated with ellipses. (this is a pretty significant problem with a lot of apps by the way).

​

Thank you for reading.

Additional Resource:

"The Realities And Myths Of Contrast And Color" @ Smashing Magazine

​

• FOOTNOTES:
  • ¹ The critical size for fluent readability is not the same as the acuity size. That is, if the smallest letters somebody can make out on an eye chart is the size of 5 arc minutes VA (20/20), then the critical size for best fluent readability is 12 arc minutes VA
  • ² There's a little bit of inconsistency among researchers as to the defined VA to a lowercase glyph — for our purposes we mean critical x-height is 0.2°, reference is G.Legge.
  • ³ "px" *is a reference to the canvas abstraction layer, and always has been, and has never meant physical device pixels, though manufacturers tend to set their pixel dot pitch on their devices based on viewing distance such that 1px equals a device pixel. (Or 1px = two or more device pixels for retina displays, except Apple uses points, which technically is 1pt = 1.333 px).
    • The 1.278 arcmin/px is a 96ppi screen at 28",* see chart.

[Myndex]

Updated SF Chart:

In this updated chart, "large headline" is 72px, and the other samples indicate their size and weight in the sample text itself. The last block is 12px 300, below minimums.

Basic non-text spatial frequency for lines:

This is for non-semantic non-text, which is essentially lines, borders, and items that don't convey a specific meaning per se.

Semantic non-text spatial frequency for icons/conveying meaning:

This is for semantic non-text, such as icons that represent a physical object (a house for home, and envelope for mail), or for pictograms, or graphics where specific meaning in conveyed in other words where specific meaning is conveyed and is important relative to understanding content or navigation.

Notes:

1. These are luminance specifications, and it is often requires color. Color is part of the SACAM (S-Luv Accessible Color Appearance Model).
2. There are preliminary, undergoing evaluation, and may change.
3. Note the significant difference between the semantic and non-semantic values.