You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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:
Weight (normalized per reference)
Size (normalized per reference)
Glyph design (i.e. serif, sans, aspect etc. strongly interrelated to weight and size)
Letter spacing (kerning and tracking, relative to glyph characteristics)
Line spacing (leading, relative to x-height for Latin writing systems)
Justification (aligned to entry point, I.e. for L to R, aligh left)
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:
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.
The pink lines on the chart are not quite in the correct locations, it is a draft.
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.
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.
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).
¹ The critical size for fluent readability isnot the sameas 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.
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:
These are luminance specifications, and it is often requires color. Color is part of the SACAM (S-Luv Accessible Color Appearance Model).
There are preliminary, undergoing evaluation, and may change.
Note the significant difference between the semantic and non-semantic values.
documentationImprovements or additions to documentationTheoryDiscussion of the underlying theories of readabilityPossible FAQ EntryThis issue may make a good FAQ Q/A
1 participant
Heading
Bold
Italic
Quote
Code
Link
Numbered list
Unordered list
Task list
Attach files
Mention
Reference
Menu
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
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:
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.
Then these spatial frequencies relate to font size as:
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:
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.
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.
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
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
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)
Obviously this translates to a different font-size: depending on the font family's x-height ratio:
9.4px x-height (7pt) is:
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):
Pushing the minimums below fluent readability:
7.0px x-height (5.25pt):
The bare minimum for 20/20:
3.9px x-height (2.9pt):
^((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
Beta Was this translation helpful? Give feedback.
All reactions