Typographic readability in theme design & development – WORKSHOP

A presentation at WordCamp Europe 2023 in June 2023 in Athens, Greece by Giulia Laco

Typographic Readability in Theme Design & Development — Typographic Readability in Theme Design & Development
WORKSHOP by GIULIA LACO June 8th-10th, Athens (Greece) #WCEU2023 #WCEU

PLEASE TAKE A SEAT — PLEASE TAKE A SEAT
DESIGNERS ON MY RIGHT NO CODERS AT THE CENTER DEVELOPERS ON MY LEFT Notebook Figma Notebook or Smartphone Notebook Codpen Giulia Laco – WCEU2023

WordCamp Europe 2023

#WCEU #WCEU2023 @wceurope @webmatter_it

Abstract (dark mode) — Abstract (dark mode)
Inviting users to read your text and actually making them read it are not easy tasks. The web content accessibility guidelines (WCAG) are a good starting point, but the factors that condition the experience of reading texts are numerous and interconnected: from the physical mechanisms of reading to the cognitive processes involved, to the amount of attention paid. Web typography best practices and wise font selection could help. Sometimes informed choices and just a few lines of CSS code can make a huge difference. Giulia Laco – WCEU2023 ABSTRACT

Abstract (light mode) — Abstract (light mode)
Inviting users to read your text and actually making them read it are not easy tasks. The web content accessibility guidelines (WCAG) are a good starting point, but the factors that condition the experience of reading texts are numerous and interconnected: from the physical mechanisms of reading to the attention paid. Web typography best practices and wise font selection could help. Sometimes informed choices and just a few lines of CSS code can make a huge difference. Giulia Laco – WCEU2023 cognitive processes involved, to the amount of

Abstract 2 (light mode) — Abstract 2 (light mode)
Inviting users to read your text and actually making them read it are not easy tasks. The web content accessibility guidelines (WCAG) are a good starting point, but the factors that condition the experience of reading texts are numerous and interconnected: from the involved, to the amount of attention paid. Web typography best practices and wise font selection could help. Sometimes informed choices and just a few lines of CSS code can make a huge difference. Giulia Laco – WCEU2023 physical mechanisms of reading to the cognitive processes

NICE TO MEET YOU (dark mode) — NICE TO MEET YOU (dark mode)
Giulia Laco
Webmatter.it Type Strategy
I’m a web designer/developer, I have been working on the Web since the mid-’90s. In recent years my main interest in design has centered around the use of typography and web fonts for readability and communication. In addition to project development, I do consulting and training on CSS and web typography.

NICE TO MEET YOU (light mode) — NICE TO MEET YOU (light mode)
Giulia Laco
Webmatter.it Type Strategy
I’m a web designer/developer, I have been working on the Web since the mid-’90s. In recent years my main interest in design has centered around the use of typography and web fonts for readability and communication. In addition to project development, I do consulting and training on CSS and web typography.

Takeaways (dark mode) — Takeaways (dark mode)
Accessibility requirements are a good starting point for readability 2. See the difference between legibility and readability 3. Recognize the main factors affecting the reading process on digital devices 4. Start recognizing web font characteristics 5. Discover how (some) variable fonts can help fine-tuning web typography Giulia Laco – WCEU2023

Takeaways (light mode) — Takeaways (light mode)
Accessibility requirements are a good starting point for readability 2. See the difference between legibility and readability 3. Recognize the main factors affecting the reading process on digital devices
Start recognizing web font characteristics
Discover how (some) variable fonts can help fine-tuning web typography Giulia Laco – WCEU2023

FACTORS THAT INFLUENCE READING — FACTORS THAT INFLUENCE READING
HOW WE READ Giulia Laco – WCEU2023

FACTORS AFFECTING READING — FACTORS AFFECTING READING
HOW WE READ
PERSONAL CONDITIONS TYPOGRAPHIC PROPERTIES Giulia Laco – WCEU2023 COMMON FACTORS

COMMON FACTORS THAT INFLUENCE READING — COMMON FACTORS THAT INFLUENCE READING
DISTANCE
LIGHTING
READING SUPPORT
READING ENVIRONMENT
MENTAL CONCENTRATION
MOOD
TEXT FUNCTION
… Giulia Laco – WCEU2023

PERSONAL CONDITIONS THAT INFLUENCE READING — PERSONAL CONDITIONS THAT INFLUENCE READING
• AGE • PROFICIENCY (reading history, language proficiency) • TOPIC • MOTIVATION • VISION IMPAIRMENTS (presbyopia, dyschromatopsia, etc.) • DYSLEXIA • ADHD • etc.. Giulia Laco – WCEU2023

TYPOGRAPHIC PROPERTIES THAT INFLUENCE READING — TYPOGRAPHIC PROPERTIES THAT INFLUENCE READING
TYPEFACE
FONT STYLE
FONT SIZE
LINE LENGTH
LINE SPACING
COLOR CONTRAST
CHARACTER SPACING
CHARACTER WIDTH
RHYTHM
… Giulia Laco – WCEU2023

PLAYGROUNDS — PLAYGROUNDS
WORKSHOP Giulia Laco – WCEU2023

CSS PLAYGROUND — CSS PLAYGROUND
BODY TEXT TYPESETTING https://bit.ly/css-readability Giulia Laco – WCEU2023

FIGMA PLAYGROUND — FIGMA PLAYGROUND
BODY TEXT TYPESETTING https://bit.ly/figma-readability Giulia Laco – WCEU2023

DEFINITIONS — DEFINITIONS
ABOUT READING Giulia Laco – WCEU2023

CONCEPTS — CONCEPTS
VISIBILITY (perceptibility) LEGIBILITY (decoding) READABILITY (ease of reading):
CONTENT READABILITY (easy to understand)
TYPOGRAPHIC READABILITY (pleasant to read) Giulia Laco – WCEU2023

WCAG 2.1 — WCAG 2.1
WEB CONTENT ACCESSIBILITY GUIDELINES Giulia Laco – WCEU2023

ALL ACCESSIBILITY GUIDELINES — ALL ACCESSIBILITY GUIDELINES
W3C Recommendation
WCAG (WEB CONTENT ACCESSIBILITY GUIDELINES)
UAAG (USER AGENT ACCESSIBILITY GUIDELINES)
ATAG (AUTHORING TOOL ACCESSIBILITY GUIDELINES) Giulia Laco – WCEU2023

TEXT & READABILITY IN WCAG 2.1 — TEXT & READABILITY IN WCAG 2.1
Giulia Laco – WCEU2023

CONFORMITY LEVELS — CONFORMITY LEVELS
W3C Recommendation WCAG 2.1 Level A Level AA Level AA Giulia Laco – WCEU2023

FOUR PRINCIPLES — FOUR PRINCIPLES
WCAG 2.1 W3C Recommendation
PERCEIVABLE
OPERABLE
UNDERSTANDABLE
ROBUST Giulia Laco – WCEU2023

TEXT & READBILITY IN WCAG 2.1 — TEXT & READBILITY IN WCAG 2.1
WCAG 2.1 W3C Recommendation 4 PRINCIPLES 13 GUIDELINES SOME SUCCESS CRITERIA (subset about text)
PERCEIVABLE 1.1 Text Alternatives 1.2 Time-based Media 1.3 Adaptable 1.3.1 Info and Relationships 1.4 Distinguishable 1.4.3 Contrast (Minimum) 1.4.4 Resize text 1.4.5 Images of Text 1.4.6 Contrast (Enhanced) 1.4.8 Visual Presentation 1.4.9 Images of Text (No Exception) 1.4.10 Reflow 1.4.12 Text Spacing
OPERABLE 2.1 Keyboard Accessible 2.2 Enough Time 2.3 Seizures and Physical Reactions 2.4 Navigable 2.4.6 Headings and Labels 2.5 Input Modalities
UNDERSTANDABLE 3.1 Readable 3.1.1 Language of Page 3.1.5 Reading 3.2 Predictable 3.3 Input Assistance
ROBUST 4.1 Compatible Level
Level A, AA, AAA https://www.w3.org/TR/WCAG21/ Giulia Laco – WCEU2023

1. PERCEIVABLE — 1. PERCEIVABLE
W3C Recommendation WCAG 2.1 Giulia Laco – WCEU2023

1. PERCEIVABLE 1.4 DISTINGUISHABLE — 1. PERCEIVABLE 1.4 DISTINGUISHABLE
W3C Recommendation WCAG 2.1 Giulia Laco – WCEU2023

IMAGES OF TEXT — IMAGES OF TEXT
PERCEIVABLE 1.4 DISTINGUISHABLE 1.4.5 IMAGES OF TEXT – Level AA 1.4.9 IMAGES OF TEXT (No Exception) – Level AAA
W3C Recommendation WCAG 2.1 Giulia Laco – WCEU2023

1.4.5 IMAGES OF TEXT — 1.4.5 IMAGES OF TEXT
If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text except for the following:
CUSTOMIZABLE - The image of text can be visually customized to the user’s requirements;
ESSENTIAL - A particular presentation of text is essential to the information being conveyed.
NOTES Logotypes (text that is part of a logo or brand name) are considered essential.
W3C Recommendation WCAG 2.1 Giulia Laco – WCEU2023

1.4.9 IMAGES OF TEXT (No Exception) — 1.4.9 IMAGES OF TEXT (No Exception)
Images of text are only used for pure decoration or where a particular presentation of text is essential to the information being conveyed.
NOTES Logotypes (text that is part of a logo or brand name) are considered essential.
W3C Recommendation WCAG 2.1 Giulia Laco – WCEU2023

Don't use images of text unless you can't do otherwise — Don't use images of text unless you can't do otherwise
Giulia Laco – WCEU2023

CONTRAST — CONTRAST
PERCEIVABLE 1.4 DISTINGUISHABLE 1.4.3 CONTRAST (Minimum) – Level AA 1.4.6 CONTRAST (Enhanced) – Level AAA
W3C Recommendation WCAG 2.1 Giulia Laco – WCEU2023

1.4.3 CONTRAST (Minimun) — 1.4.3 CONTRAST (Minimun)
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:
LARGE TEXT Large-scale text and images of large-scale text have a contrast ratio of at least 3:1.
INCIDENTAL: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
LOGOTYPES: Text that is part of a logo or brand name has no contrast requirement.
W3C Recommendation WCAG 2.1 Giulia Laco – WCEU2023

1.4.6 CONTRAST (Enhanced) — 1.4.6 CONTRAST (Enhanced)
The visual presentation of text and images of text has a contrast ratio of at least 7:1, except for the following:
LARGE TEXT: Large-scale text and images of large-scale text have a contrast ratio of at least 4.5:1;
INCIDENTAL: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
LOGOTYPES: Text that is part of a logo or brand name has no contrast requirement.
W3C Recommendation WCAG 2.1 Giulia Laco – WCEU2023

Giulia Laco – WCEU2023 🤯

MINIMAL CONTRAST RATIO WITH THE BACKGROUND — MINIMAL CONTRAST RATIO WITH THE BACKGROUND
Level AA
REGULAR TEXT 4.5:1
LARGE TEXT* 3:1
Level AAA
REGULAR TEXT 7:1
LARGE TEXT* 4.5:1
W3C Recommendation WCAG 2.1 Giulia Laco – WCEU2023

What does “large text” mean? — What does “large text” mean?
🤔 Giulia Laco – WCEU2023

*LARGE SCALE TEXT definition — *LARGE SCALE TEXT definition
Text with at least 18 point or 14 point bold or font size that would yield equivalent size for Chinese, Japanese and Korean (CJK) fonts
Fonts with extraordinarily thin strokes or unusual features and characteristics that reduce the familiarity of their letter forms are harder to read, especially at lower contrast levels.
Font size is the size when the content is delivered. It does not include resizing that may be done by a user.
The actual size of the character that a user sees is dependent both 5. on the author-defined size and the user’s display or user-agent settings. For many mainstream body text fonts, 14 and 18 point is roughly equivalent to 1.2 and 1.5 em or to 120% or 150% of the default size for body text (assuming that the body font is 100%), but authors would need to check this for the particular fonts in use. When fonts are defined in relative units, the actual point size is calculated by the user agent for display. The point size should be obtained from the user agent, or calculated based on font metrics as the user agent does, when evaluating this success criterion. Users who have low vision would be responsible for choosing appropriate settings.
When using text without specifying the font size, the smallest font size used on major browsers for unspecified text would be a reasonable size to assume for the font. If a level 1 heading is rendered in 14pt bold or higher on major browsers, then it would be reasonable to assume it is large text. Relative scaling can be calculated from the default sizes in a similar fashion.
The 18 and 14 point sizes for roman texts are taken from the minimum size for large print (14pt) and the larger standard font size (18pt). For other fonts such as CJK languages, the “equivalent” sizes would be the minimum large print size used for those languages and the next larger standard large print size.
W3C Recommendation WCAG 2.1 Giulia Laco – WCEU2023

CSS UNITS: POINT VS. PIXEL — CSS UNITS: POINT VS. PIXEL
POINT (pt): unit of measurement for printing PIXEL (px): unit of measurement for the screen
W3C Recommendation WCAG 2.1 Giulia Laco – WCEU2023

But do we really know what a pixel is? — But do we really know what a pixel is?
😳 Giulia Laco – WCEU2023

MEASUREMENT UNITS: PHYSICAL VS. VIRTUAL PIXEL — MEASUREMENT UNITS: PHYSICAL VS. VIRTUAL PIXEL
Physical pixel (or device pixel) MEASUREMENT UNIT FOR OLD SCREENS
Virtual pixel (based on the reference pixel) MEASUREMENT UNIT FOR NEW HIGH-DENSITY SCREENS
Giulia Laco – WCEU2023

MEASUREMENT UNITS: ORIGIN OF THE VIRTUAL PIXEL — MEASUREMENT UNITS: ORIGIN OF THE VIRTUAL PIXEL
iPhone 3 (2008) screen diagonal: 3.5 in = 89 mm 320×480 px 163 ppi
iPhone 4 (2011) screen diagonal: 3.5 in = 89 mm 640×960 px 326 ppi
Giulia Laco – WCEU2023

MEASUREMENT UNITS: ORIGIN OF THE VIRTUAL PIXEL — MEASUREMENT UNITS: ORIGIN OF THE VIRTUAL PIXEL
iPhone 3 physical pixel
iPhone 4 virtual pixel
Giulia Laco – WCEU2023

CSS PIXEL DEFINITION — CSS PIXEL DEFINITION
Visual angle of about 0.0213 degrees
A CSS pixel is the canonical unit of measure for all lengths and measurements in CSS. This unit is density-independent, and distinct from actual hardware pixels present in a display. User agents and operating systems should ensure that a CSS pixel is set as closely as possible to the CSS Values and Units Module Level 3 reference pixel [css3-values], which takes into account the physical dimensions of the display and the assumed viewing distance (factors that cannot be determined by content authors).
Giulia Laco – WCEU2023

CSS DEFINITION: THE REFERENCE PIXEL — CSS DEFINITION: THE REFERENCE PIXEL
The reference pixel is the visual angle of one pixel on a device with a device pixel density of 96dpi and a distance from the reader of an arm’s length. For a nominal arm’s length of 28 inches, the visual angle is therefore about 0.0213 degrees. For reading at arm’s length, 1px thus corresponds to about 0.26 mm (1/96 inch).
https://www.w3.org/TR/css-values-3/#reference-pixel
1 arm (28 in) = 71 cm
Giulia Laco – WCEU2023

DISTANCE AND SIZE PERCEPTION — DISTANCE AND SIZE PERCEPTION
Farther - larger text Nearer - smaller text
Giulia Laco – WCEU2023

DISTANCE AND FONT-SIZE — DISTANCE AND FONT-SIZE
Farther Nearer IA (Oliver Reichenstein), 2012: https://ia.net/know-how/responsive-typography-the-basics
Giulia Laco – WCEU2023

RESPONSIVE WEB TYPOGRAPHY — RESPONSIVE WEB TYPOGRAPHY
Giulia Laco – WCEU2023

RESPONSIVE WEB TYPOGRAPHY — RESPONSIVE WEB TYPOGRAPHY
Farther Font-size: 16px; Line-height: 26px;
Nearer Font-size: 20px; Line-height: 34px;
Giulia Laco – WCEU2023

But let's go back to the WCAG guidelines — But let's go back to the WCAG guidelines
🤗 Giulia Laco – WCEU2023

POINT VS. PIXEL — POINT VS. PIXEL
1pt = 1/72 of inch = 0.35mm 1px = 1/96 of inch = 0.26mm
Giulia Laco – WCEU2023

CONVERSION OF POINTS INTO PIXELS — CONVERSION OF POINTS INTO PIXELS
12pt converts to 16px
0.35mm x 12 = 4.2mm 4.2mm : 0.26mm = 16.1538462px approx 16px
Giulia Laco – WCEU2023

Let's convert the values indicated in the guidelines into pixels — Let's convert the values indicated in the guidelines into pixels
🤓 Giulia Laco – WCEU2023

CONVERSION OF POINTS INTO PIXELS — CONVERSION OF POINTS INTO PIXELS
font-size: 18pt > 24px
font-weight: bold font-size: 14pt > 19px
LARGE TEXT minimum contrast ratio for level AA 3 : 1 minimum contrast ratio for level AAA 4,5 : 1
W3C Recommendation WCAG 2.1 Giulia Laco – WCEU2023

MINIMAL CONTRAST RATIO WITH THE BACKGROUND — MINIMAL CONTRAST RATIO WITH THE BACKGROUND
< 24px < 19px when bold is considered REGULAR TEXT Level AA min. contrast ratio 4.5:1 Level AAA min. contrast ratio 3:1
≥ 24px ≥ 19px when bold is considered LARGE OR BOLD TEXT Level AA min. contrast ratio 7:1 Level AAA min. contrast ratio 4.5:1
W3C Recommendation WCAG 2.1 Giulia Laco – WCEU2023

* LARGE TEXT — * LARGE TEXT
NOTE no 3 […] For many mainstream body text fonts, 14 and 18 point is roughly equivalent to 1.2 and 1.5 em or to 120% or 150% of the default size for body text (assuming that the body font is 100%), but authors would need to check this for the particular fonts in use. […]
points: 14pt (bold) 18pt ems: 1.2em 1.5em percentage: 120% 150% pixels: 19px 24px
W3C Recommendation WCAG 2.1 Giulia Laco – WCEU2023

But are we really going to use pixels to set text size? — But are we really going to use pixels to set text size?
…mmmmh 🤔 Giulia Laco – WCEU2023

CSS: UNITS OF MEASUREMENT — CSS: UNITS OF MEASUREMENT
Giulia Laco – WCEU2023

CSS UNITS OF MEASUREMENTS: ABSOLUTE UNITS — CSS UNITS OF MEASUREMENTS: ABSOLUTE UNITS
centimeters (cm) millimeters (mm) inches (in) points (pt) picas (pc) pixels (px)
PRINT TYPOGRAPHY SCREEN
Giulia Laco – WCEU2023

CSS UNITS OF MEASUREMENTS: RELATIVE UNITS — CSS UNITS OF MEASUREMENTS: RELATIVE UNITS
% = percentage of the parent element em = relative to font size (width of the “M” of the current font) rem = relative to the font size of the root element ex = relative to the x-height of the current font ch = relative to the width of the “0” in the current font
PRINT SCREEN TYPOGRAPHY
Giulia Laco – WCEU2023

CSS UNITS OF MEASUREMENTS: RELATIVE UNITS — CSS UNITS OF MEASUREMENTS: RELATIVE UNITS
vw, vh, vmin, vmax = viewport percentage lengths: width, height, less or greater between the two sides
vb, svb, lvb, dvb = viewport percentage lengths external block
vi, svi, lvi, dvi = viewport percentage lengths internal block
cqw, cqh, cqi, cqb, cqmin, cqmax = container percent lengths VIEWPORT CONTAINER
Giulia Laco – WCEU2023

But are we really going to use pixels to set text size? — But are we really going to use pixels to set text size?
…mmmmh 🤔 Giulia Laco – WCEU2023

1.4.4 RESIZE TEXT — 1.4.4 RESIZE TEXT
PERCEIVABLE 1.4 DISTINGUISHABLE 1.4.4 RESIZE TEXT - Level AA
W3C Recommendation WCAG 2.1 Giulia Laco – WCEU2023

1.4.4 RESIZE TEXT - level AA — 1.4.4 RESIZE TEXT - level AA
Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.
This rule should be seen in combination with the UAAG 1.0 Checkpoint 4.1 guideline, i.e. with what browsers are asked to
W3C Recommendation WCAG 2.1 Giulia Laco – WCEU2023

DIFFERENCES: SCREEN ZOOM AND TEXT ZOOM — DIFFERENCES: SCREEN ZOOM AND TEXT ZOOM
SCREEN ZOOM It changes the size of the reference pixel
TEXT ZOOM It changes the size of the root font
Giulia Laco – WCEU2023

FONT-SIZE IN PIXELS BLOCKS REWRITING — FONT-SIZE IN PIXELS BLOCKS REWRITING
ACCESSIBILITY no font-size in pixels on the root element Giulia Laco – WCEU2023

STATIC VS. RELATIVE UNITS — STATIC VS. RELATIVE UNITS
ACCESSIBILITY https://codepen.io/resource11/full/eYOQQxY Giulia Laco – WCEU2023

1.4.10 REFLOW - level AA — 1.4.10 REFLOW - level AA
PERCEIVABLE 1.4 DISTINGUISHABLE 1.4.10 REFLOW
W3C Recommendation WCAG 2.1 Giulia Laco – WCEU2023

1.4.10 REFLOW - level AA — 1.4.10 REFLOW - level AA
Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for:
Vertical scrolling content at a width equivalent to 320 CSS pixels;
Horizontal scrolling content at a height equivalent to 256 CSS pixels.
Except for parts of the content which require two-dimensional layout for usage or meaning.
NOTE Note: 320 CSS pixels is equivalent to a starting viewport width of 1280 CSS pixels wide at 400% zoom. For web content which are designed to scroll horizontally (e.g. with vertical text), the 256 CSS pixels is equivalent to a starting viewport height of 1024px at 400% zoom.
NOTE Examples of content which require two-dimensional layout are images, maps, diagrams, video, games, presentations, data tables, and interfaces where it is necessary to keep toolbars in view while manipulating content.
W3C Recommendation WCAG 2.1 Giulia Laco – WCEU2023

1.4.8 VISUAL PRESENTATION - Level AAA — 1.4.8 VISUAL PRESENTATION - Level AAA
PERCEIVABLE 1.4 DISTINGUISHABLE 1.4.8 VISUAL PRESENTATION
W3C Recommendation WCAG 2.1 Giulia Laco – WCEU2023

1.4.8 VISUAL PRESENTATION - level AAA — 1.4.8 VISUAL PRESENTATION - level AAA
For the visual presentation of blocks of text, a mechanism is available to achieve the following:
Foreground and background colors can be selected by the user.
Width is no more than 80 characters or glyphs (40 if CJK).
Text is not justified (aligned to both the left and the right margins).
Line spacing (leading) is at least space-and-a-half within paragraphs, and paragraph spacing is at least 1.5 times larger than the line spacing.
Text can be resized without assistive technology up to 200 percent in a way that does not require the user to scroll horizontally to read a line of text on a full-screen window.
W3C Recommendation WCAG 2.1 Giulia Laco – WCEU2023

1.4.12 TEXT SPACING - Level AA — 1.4.12 TEXT SPACING - Level AA
PERCEIVABLE 1.4 DISTINGUISHABLE 1.4.12 TEXT SPACING
W3C Recommendation WCAG 2.1 Giulia Laco – WCEU2023

1.4.12 TEXT SPACING - level AA — 1.4.12 TEXT SPACING - level AA
In content implemented using markup languages that support the following text style properties, no loss of content or functionality occurs by setting all of the following and by changing no other style property: • Line height (line spacing) to at least 1.5 times the font size; • Spacing following paragraphs to at least 2 times the font size; • Letter spacing (tracking) to at least 0.12 times the font size; • Word spacing to at least 0.16 times the font size.
Exception: Human languages and scripts that do not make use of one or more of these text style properties in written text can conform using only the properties that exist for that combination of language and script.
W3C Recommendation WCAG 2.1 Giulia Laco – WCEU2023

Problem — Problem
CSS: LETTER-SPACING do not use it combined with ligatures
https://twitter.com/LeaVerou/status/485885496305127424
Giulia Laco – WCEU2023

3.1.1 LANGUAGE OF PAGE - Level A — 3.1.1 LANGUAGE OF PAGE - Level A
UNDERSTANDABLE 3.1 READABLE 3.1.1 LANGUAGE OF PAGE
W3C Recommendation WCAG 2.1 Giulia Laco – WCEU2023

3.1.1 LANGUAGE OF PAGE - level A — 3.1.1 LANGUAGE OF PAGE - level A
The default human language of each Web page can be programmatically determined.
W3C Recommendation WCAG 2.1 Giulia Laco – WCEU2023

HTML: DEFINE THE LANGUAGE OF THE DOCUMENT — HTML: DEFINE THE LANGUAGE OF THE DOCUMENT
<!doctype html>
<html lang=”fr”> <head> <meta charset=”utf-8”> <title>document écrit en français</title> </head> <body> … document écrit en français … </body> </html>
Giulia Laco – WCEU2023

Consequences: hyphenation — Consequences: hyphenation
Giulia Laco – WCEU2023

HYPHENATION AND LANGUAGES — HYPHENATION AND LANGUAGES
https://sillabazione.glitch.me/ Giulia Laco – WCEU2023

HYPHENATION AND LANGUAGES — HYPHENATION AND LANGUAGES
https://sillabazione.glitch.me/ Giulia Laco – WCEU2023

3.1.5 READING LEVEL — 3.1.5 READING LEVEL
UNDERSTANDABLE 3.1 READABLE 3.1.5 READING LEVEL – Level AAA
W3C Recommendation WCAG 2.1 Giulia Laco – WCEU2023

3.1.5 READING LEVEL – level AAA — 3.1.5 READING LEVEL – level AAA
When text requires reading ability more advanced than the lower secondary education level after removal of proper names and titles, supplemental content, or a version that does not require reading ability more advanced than the lower secondary education level, is available.
W3C Recommendation WCAG 2.1 Giulia Laco – WCEU2023

Another meaning of “READABILITY” — Another meaning of “READABILITY”
Giulia Laco – WCEU2023

CONCEPTS — CONCEPTS
VISIBILITY (perceptibility) LEGIBILITY (decoding) READABILITY (ease of reading):
CONTENT READABILITY (easy to understand)
TYPOGRAPHIC READABILITY (pleasant to read)
Giulia Laco – WCEU2023

LEGIBILITY & READABILITY — LEGIBILITY & READABILITY
DEFINITIONS Giulia Laco – WCEU2023

LEGIBILITY — LEGIBILITY
(DECODING) “Can you read it?” — Stephen Coles
Giulia Laco – WCEU2023

CHARACTER ANATOMY — CHARACTER ANATOMY
ascendent font-size visible height x-height axis descendent serif baseline aperture
Giulia Laco – WCEU2023

AMBIGUOUS SHAPES OR PROPORTIONS — AMBIGUOUS SHAPES OR PROPORTIONS
Giulia Laco – WCEU2023

0O comparison — 0O comparison
Giulia Laco – WCEU2023

9g comparison — 9g comparison
Giulia Laco – WCEU2023

1Illinois comparison — 1Illinois comparison
Giulia Laco – WCEU2023

kering keming comparison — kering keming comparison
Giulia Laco – WCEU2023

Rhythm and letter spacing — Rhythm and letter spacing
Giulia Laco – WCEU2023

minimum comparison — minimum comparison
Giulia Laco – WCEU2023

OTHER POTENTIALLY AMBIGUOUS SHAPES — OTHER POTENTIALLY AMBIGUOUS SHAPES
Giulia Laco – WCEU2023

bdpq comparison (sans serif) — bdpq comparison (sans serif)
Giulia Laco – WCEU2023

bdpq comparison (serif) — bdpq comparison (serif)
Giulia Laco – WCEU2023

READABILITY — READABILITY
Giulia Laco – WCEU2023

CONTENT READABILITY — CONTENT READABILITY
“Can you understand this text?”
Giulia Laco – WCEU2023

TYPOGRAPHIC READABILITY — TYPOGRAPHIC READABILITY
“Would you like to read this text?” — Stephen Coles
Giulia Laco – WCEU2023

READABILITY — READABILITY
READING EXPERIENCE is a subset of USER EXPERIENCE
Giulia Laco – WCEU2023

READABILITY — READABILITY
UX = USER EXPERIENCE CX = CUSTOMER EXPERIENCE RX = READER EXPERIENCE
Giulia Laco – WCEU2023

HOW DO WE READ? — HOW DO WE READ?
TECHNICAL ASPECTS Giulia Laco – WCEU2023

THE PHYSICAL SIDE OF READING — THE PHYSICAL SIDE OF READING
Giulia Laco – WCEU2023

HOW WE READ: THE PHYSICAL SIDE — HOW WE READ: THE PHYSICAL SIDE
EYES Giulia Laco – WCEU2023

HOW WE READ: THE PHYSICAL SIDE — HOW WE READ: THE PHYSICAL SIDE
BRAIN Giulia Laco – WCEU2023

THE EYE MOVEMENTS — THE EYE MOVEMENTS
Giulia Laco – WCEU2023

FIXATIONS — FIXATIONS
HOW WE READ
Giulia Laco – WCEU2023

SACCADES — SACCADES
HOW WE READ
Giulia Laco – WCEU2023

VERTICAL FOCUS — VERTICAL FOCUS
HOW WE READ
Giulia Laco – WCEU2023

SACCADES AND FIXATIONS — SACCADES AND FIXATIONS
HOW WE READ – Sofie Beier,–Sofie 2022 Beier Giulia Laco – WCEU2023

ACUITY OF FOVEAL VISION — ACUITY OF FOVEAL VISION
HOW WE READ https://en.wikipedia.org/wiki/Eye_movement_in_reading Giulia Laco – WCEU2023

RETINA, MACULA AND FOVEA — RETINA, MACULA AND FOVEA
HOW WE READ
Giulia Laco – WCEU2023

MACULA AND FOVEA — MACULA AND FOVEA
HOW WE READ
Giulia Laco – WCEU2023

SACCADED AND FIXATIONS — SACCADED AND FIXATIONS
HOW WE READ
Giulia Laco – WCEU2023

MENTAL PROCESSES — MENTAL PROCESSES
Giulia Laco – WCEU2023

LETTER AND WORD RECOGNITION — LETTER AND WORD RECOGNITION
HOW WE READ https://www.youtube.com/watch?v=xAzFiyqNO4w –Sofie Beier
Giulia Laco – WCEU2023

WORD RECOGNITION — WORD RECOGNITION
HOW WE READ Giulia Laco – WCEU2023

quote — quote
“We read best what we read most. — Zuzana Licko Giulia Laco – WCEU2023

WHAT WE READ — WHAT WE READ
TYPES OF READING Giulia Laco – WCEU2023

TYPES OF READING — TYPES OF READING
LONG-FORM / CONTINUOUS READING (NOVELS, TECHNICAL TEXTS)
INTERLUDE READING (TYPICAL OF MOBILE, SOCIAL MEDIA)
GLANCEABLE READING (STREET DIRECTIONS, DIGITAL MENUS)
Giulia Laco – WCEU2023

TYPES OF TEXT ON WEBSITES — TYPES OF TEXT ON WEBSITES
Giulia Laco – WCEU2023

TYPES OF TEXT ON WEBSITES — TYPES OF TEXT ON WEBSITES
FUNCTIONS:
BODY TEXT It needs to be read and understood. It requires an immersive reading.
DISPLAY TEXT It has to be noticed and it has to suggest something about the content. Scanning reading.
FUNCTIONAL TEXT It expresses its function when needed. It must not attract attention but must be found when necessary.
Giulia Laco – WCEU2023

TYPES OF TEXT ON WEBSITES — TYPES OF TEXT ON WEBSITES
Giulia Laco – WCEU2023

TYPES OF READING OF WEBSITES — TYPES OF READING OF WEBSITES
-BODY TEXT LONG-FORM READING INTERLUDE READING -DISPLAY TEXT GLANCEABLE READING -FUNCTIONAL TEXT SEARCHEABLE READING
Giulia Laco – WCEU2023

RULES OF TYPESETTING — RULES OF TYPESETTING
Giulia Laco – WCEU2023

CSS PLAYGROUND FOR BODY TEXT TYPESETTING — CSS PLAYGROUND FOR BODY TEXT TYPESETTING
https://bit.ly/css-readability.
Giulia Laco – WCEU2023

FIGMA PLAYGROUND FOR BODY TEXT TYPESETTING — FIGMA PLAYGROUND FOR BODY TEXT TYPESETTING
https://bit.ly/figma-readability
Giulia Laco – WCEU2023

PARAGRAPH TYPESETTING — PARAGRAPH TYPESETTING
Giulia Laco – WCEU2023

PARAGRAPH TYPESETTING — PARAGRAPH TYPESETTING
font-size line-height paragraph width
Giulia Laco – WCEU2023

R. Rutter, Web Typography — R. Rutter, Web Typography
Readability:
Text size Measure Line spacing
R. Rutter, Web Typography
Giulia Laco – WCEU2023

M. Latin, Better web typography for a better web — M. Latin, Better web typography for a better web
font size line height line length
M. Latin, Better web typography for a better web
Giulia Laco – WCEU2023

LINE LENGTH & VISION — LINE LENGTH & VISION
Giulia Laco – WCEU2023

RETINA, MACULA AND FOVEA — RETINA, MACULA AND FOVEA
HOW WE READ
Giulia Laco – WCEU2023

MACULA AND FOVEA — MACULA AND FOVEA
HOW WE READ
“7-9 characters in a fixation of a text at about 30cm with a font between 9 and 11 points.”
– Bruno Maag
Giulia Laco – WCEU2023

SACCADES AND FIXATIONS — SACCADES AND FIXATIONS
HOW WE READ “7-8 saccadic movements per line are ideal”
– Bruno Maag
Giulia Laco – WCEU2023

LINE LENGHT (measure) — LINE LENGHT (measure)
Saccadic movements per line: 7-9 Characters per fixation: 7-9 Characters per line: 56-64 Characters per line (approx): 55-65
“The scientific proof of what typographers have known for 500 years” – Bruno Maag Giulia Laco – WCEU2023

LINE LENGHT (measure) — LINE LENGHT (measure)
R. Bringhurst, The elements of typographic style
Giulia Laco – WCEU2023

FONT-SIZE — FONT-SIZE
Giulia Laco – WCEU2023

CSS FONT-SIZE — CSS FONT-SIZE
The actual font size depends on the font
Giulia Laco – WCEU2023

CSS: NEW PROPERTIES — CSS: NEW PROPERTIES
font-size-adjust @font-face size-adjust
Giulia Laco – WCEU2023

VARIABLE FONTS — VARIABLE FONTS
TYPOGRAPHIC REVOLUITION Giulia Laco – WCEU2023

FONT FILES — FONT FILES
STATIC FONTS many files
VARIABLE FONT one file
Giulia Laco – WCEU2023

VARIABLE FONTS: VARIATION AXES — VARIABLE FONTS: VARIATION AXES
REGISTERED AXES CUSTOM AXES
Giulia Laco – WCEU2023

USEFUL AXES — USEFUL AXES
Giulia Laco – WCEU2023

VARIABLE FONTS: VARIATION AXES — VARIABLE FONTS: VARIATION AXES
WEIGHT Nunito by Vernon Adams Giulia Laco – WCEU2023

VARIABLE FONTS: VARIATION AXES — VARIABLE FONTS: VARIATION AXES
WEIGHT WIDTH Amstelvar Alpha by David Berlow Giulia Laco – WCEU2023

VARIABLE FONTS: VARIATION AXES — VARIABLE FONTS: VARIATION AXES
OPTICAL SIZE OPTICAL SIZE + FONT SIZE Amstelvar Alpha by David Berlow Giulia Laco – WCEU2023

VARIABLE FONTS: OPTICAL SIZE AXIS — VARIABLE FONTS: OPTICAL SIZE AXIS
opsz USEFUL FOR BODY TEXT or USEFUL FOR HEADLINES
A single variable font file can serve for body text and headings, plus it can adapt to the font size in a design with fluid typography
Giulia Laco – WCEU2023

VARIABLE FONTS — VARIABLE FONTS
“COMPRESS, EXPRESS, FINESSE – Dave Crossland https://www.youtube.com/watch?v=yJE8wkNif5I&t=2s Giulia Laco – WCEU2023

VARIABLE FONTS: GRADE AXIS — VARIABLE FONTS: GRADE AXIS
GRAD Giulia Laco – WCEU2023

VARIABLE FONTS: GRADE AXIS — VARIABLE FONTS: GRADE AXIS
GRAD https://www.figma.com/proto/XJVxH0wGzDrTtxJzEzwxW6/The-grade-axis-in-variable-fonts?pageid=0%3A1&node-id=46-2 Giulia Laco – WCEU2023

VARIABLE FONTS: LEXEND AXIS — VARIABLE FONTS: LEXEND AXIS
LXND https://www.lexend.com/ Giulia Laco – WCEU2023

READABILITY RESEARCH — READABILITY RESEARCH
Giulia Laco – WCEU2023

THE READABILITY CONSORTIUM — THE READABILITY CONSORTIUM
READABILITY RESEARCH
Giulia Laco – WCEU2023

SANDBOX: READABILITY PLAYGROUND — SANDBOX: READABILITY PLAYGROUND
READABILITY PLAYGROUND https://readabilitymatters.org/sandbox Giulia Laco – WCEU2023

SANDBOX: READABILITY PLAYGROUND — SANDBOX: READABILITY PLAYGROUND
some samples Giulia Laco – WCEU2023

CLUSTERING DIVERSE READING NEEDS — CLUSTERING DIVERSE READING NEEDS
HOW WE READ https://blog.adobe.com/en/publish/2023/04/25/new-adobe-researchexamines-user-centric-designs-diverse-digital-reading-needs Giulia Laco – WCEU2023

THE READABILITY GROUP — THE READABILITY GROUP
READABILITY RESEARCH
https://www.thereadability.group/
Giulia Laco – WCEU2023

READABILITY: A COMBINED EXPERIENCE — READABILITY: A COMBINED EXPERIENCE
READABILITY RESEARCH
TYPOGRAPHY ACCESSIBILITY BRANDING https://www.thereadability.group/
Giulia Laco – WCEU2023

…
Giulia Laco – WCEU2023

BIONIC READING® — BIONIC READING®
NEW IDEAS
Giulia Laco – WCEU2023

BIONIC READING® — BIONIC READING®
https://bionic-reading.com/ Giulia Laco – WCEU2023

BIONIC READING® — BIONIC READING®
font size font family letter spacing fixation intensity line spacing saccade width lightness line width
Giulia Laco – WCEU2023

WORKSHOP PLAYGROUNDS — WORKSHOP PLAYGROUNDS
Giulia Laco – WCEU2023

CSS PLAYGROUND FOR BODY TEXT TYPESETTING — CSS PLAYGROUND FOR BODY TEXT TYPESETTING
https://bit.ly/css-readability. Giulia Laco – WCEU2023

BODY TEXT TYPESETTING https://bit.ly/figma-readability Giulia Laco – WCEU2023 FIGMA PLAYGROUND

Thank you for your attention!

and thanks to

SOME LINKS — SOME LINKS
Giulia Laco – WCEU2023

PLAYGROUNDS — PLAYGROUNDS
Giulia Laco – WCEU2023

VARIABLE FONTS PLAYGROUND — VARIABLE FONTS PLAYGROUND
https://www.axis-praxis.org/ Giulia Laco – WCEU2023

VARIABLE FONTS PLAYGROUND — VARIABLE FONTS PLAYGROUND
https://v-fonts.com/ Giulia Laco – WCEU202

READABILITY PLAYGROUND - SANDBOX — READABILITY PLAYGROUND - SANDBOX
https://readabilitymatters.org/sandbox Giulia Laco – WCEU2023

TOOLS — TOOLS
Giulia Laco – WCEU2023

FONT TOOLS — FONT TOOLS
https://wakamaifondue.com/ Giulia Laco – WCEU2023

LINKS — LINKS
Giulia Laco – WCEU2023

LINKS — LINKS
ACCESSIBILITY WCAG 2.1 https://www.w3.org/TR/WCAG21/ CSS Reference pixel https://www.w3.org/TR/css-values-3/#reference-pixel
VIDEOS Typographic accessibility – Bruno Maag https://www.youtube.com/watch?v=bLWZAbgwj_c&t=3556s Don’t believe the type https://www.deque.com/axe-con/sessions/dont-believe-the-type
BOOKS https://legible-typography.com/en/
Giulia Laco – WCEU2023

LINKS — LINKS
CSS UNITS Conversion tools https://codepen.io/webrocker/pen/gXQyvo https://pixelsconverter.com/pt-to-px Problem https://www.24a11y.com/2019/pixels-vs-relative-units-in-css-why-its-stilla-big-deal/ https://codepen.io/resource11/full/eYOQQxY
COLOUR CONTRAST WCAG contrast checker tools https://color.adobe.com/it/create/color-contrast-analyzer
http://a11yrocks.com/colorPalette/ https://www.tpgi.com/color-contrast-checker/ APCA contrast checker tools http://www.myndex.com/APCA/ https://contrast-checker.bellette.com.au/
Giulia Laco – WCEU2023

IMAGE CREDITS — IMAGE CREDITS
Pixabay.com Flickr.com Giulia Laco – WCEU2023

COLOPHON

Giulia Laco
@giulialaco

1 / 183

Inviting users to read your text and actually making them read it are not easy tasks.

The web content accessibility guidelines (WCAG) are a good starting point, but the factors that condition the experience of reading texts are numerous and interconnected: from the physical mechanisms of reading to the cognitive processes involved, to the amount of attention paid.

Web typography best practices and wise font selection could help. Sometimes informed choices and just a few lines of CSS code can make a huge difference.

Resources

The following resources were mentioned during the presentation or are useful additional information.

Readability playground

A readability playground I prepared to let workshop attendees better experiment with the concepts I presented. Full of CSS properties that might affect readability.

Buzz and feedback

Here’s what was said about this presentation on social media.

I am so thrilled to attend WordCamp Europe in Athens and meet such a large and articulated community! #wceu https://t.co/EKJdWSI5H4
— Giulia Laco (@webmatter_it) May 16, 2023
New show. More builder tips from @WCEurope speakers.

Thanks
Dave Artiss@webmatter_it @meeware @BeTheBreeze
Thomas Roberts & Neils Lange
@PatriciaBT70 @BeckForIndiana @chrislubkert @PetyaPetkova555 @jamesgiroux https://t.co/jkbM7D2sDv
— Do_the Woo - WooCommerce Builder Community (@DotheWoo) June 1, 2023
https://t.co/HgS6umEsVy #WCEU #WCEU2023
— Giulia Laco (@webmatter_it) June 7, 2023
Typographic readability in theme design & development

Insightful workshop by Giulia Laco! @webmatter_it #WCEU #typography #accessibility #wordpress pic.twitter.com/DiBvf4wkTJ
— Dimitra Panagopoulou (@designways1) June 10, 2023
Check our family picture!! WordCamp Europe Athens 2023!! #WCEU #WCEU2023
Picture taken by: @NiloVelez pic.twitter.com/bXRIswdfAn
— WordCamp Europe (@WCEurope) June 10, 2023