Typographic readability in theme design & development – WORKSHOP

Typographic Readability in Theme Design & Development

WORKSHOP by GIULIA LACO June 8th-10th, Athens (Greece) #WCEU2023 #WCEU

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)

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)

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)

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)

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)

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)

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)

1. 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
2. Start recognizing web font characteristics
3. Discover how (some) variable fonts can help fine-tuning web typography Giulia Laco – WCEU2023

FACTORS THAT INFLUENCE READING

HOW WE READ Giulia Laco – WCEU2023

FACTORS AFFECTING READING

HOW WE READ

PERSONAL CONDITIONS TYPOGRAPHIC PROPERTIES Giulia Laco – WCEU2023 COMMON FACTORS

COMMON FACTORS THAT INFLUENCE READING

1. DISTANCE
2. LIGHTING
3. READING SUPPORT
4. READING ENVIRONMENT
5. MENTAL CONCENTRATION
6. MOOD
7. TEXT FUNCTION
8. … Giulia Laco – WCEU2023

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

1. TYPEFACE
2. FONT STYLE
3. FONT SIZE
4. LINE LENGTH
5. LINE SPACING
6. COLOR CONTRAST
7. CHARACTER SPACING
8. CHARACTER WIDTH
9. RHYTHM
10. … Giulia Laco – WCEU2023

PLAYGROUNDS

WORKSHOP Giulia Laco – WCEU2023

CSS PLAYGROUND

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

FIGMA PLAYGROUND

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

DEFINITIONS

ABOUT READING Giulia Laco – WCEU2023

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

WEB CONTENT ACCESSIBILITY GUIDELINES Giulia Laco – WCEU2023

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

Giulia Laco – WCEU2023

CONFORMITY LEVELS

W3C Recommendation WCAG 2.1 Level A Level AA Level AA Giulia Laco – WCEU2023

FOUR PRINCIPLES

WCAG 2.1 W3C Recommendation

1. PERCEIVABLE
2. OPERABLE
3. UNDERSTANDABLE
4. ROBUST Giulia Laco – WCEU2023

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

W3C Recommendation WCAG 2.1 Giulia Laco – WCEU2023

1. PERCEIVABLE 1.4 DISTINGUISHABLE

W3C Recommendation WCAG 2.1 Giulia Laco – WCEU2023

IMAGES OF TEXT

1. 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

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)

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

Giulia Laco – WCEU2023

CONTRAST

1. 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)

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)

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

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?

🤔 Giulia Laco – WCEU2023

*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

1. 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.

2. Font size is the size when the content is delivered. It does not include resizing that may be done by a user.

3. 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.

4. 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.

5. 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

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?

😳 Giulia Laco – WCEU2023

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

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

iPhone 3 physical pixel

iPhone 4 virtual pixel

Giulia Laco – WCEU2023

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

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

Farther - larger text Nearer - smaller text

Giulia Laco – WCEU2023

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

Giulia Laco – WCEU2023

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

🤗 Giulia Laco – WCEU2023

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

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

🤓 Giulia Laco – WCEU2023

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

< 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

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?

…mmmmh 🤔 Giulia Laco – WCEU2023

CSS: UNITS OF MEASUREMENT

Giulia Laco – WCEU2023

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

% = 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

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?

…mmmmh 🤔 Giulia Laco – WCEU2023

1.4.4 RESIZE TEXT

1. 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

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

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

ACCESSIBILITY no font-size in pixels on the root element Giulia Laco – WCEU2023

STATIC VS. RELATIVE UNITS

ACCESSIBILITY https://codepen.io/resource11/full/eYOQQxY Giulia Laco – WCEU2023

1.4.10 REFLOW - level AA

1. PERCEIVABLE 1.4 DISTINGUISHABLE 1.4.10 REFLOW

W3C Recommendation WCAG 2.1 Giulia Laco – WCEU2023

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. PERCEIVABLE 1.4 DISTINGUISHABLE 1.4.8 VISUAL PRESENTATION

W3C Recommendation WCAG 2.1 Giulia Laco – WCEU2023

1.4.8 VISUAL PRESENTATION - level AAA

For the visual presentation of blocks of text, a mechanism is available to achieve the following:

1. Foreground and background colors can be selected by the user.
2. Width is no more than 80 characters or glyphs (40 if CJK).
3. Text is not justified (aligned to both the left and the right margins).
4. 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.
5. 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. PERCEIVABLE 1.4 DISTINGUISHABLE 1.4.12 TEXT SPACING

W3C Recommendation WCAG 2.1 Giulia Laco – WCEU2023

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

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. 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

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

<!doctype html>

Giulia Laco – WCEU2023

Consequences: hyphenation

Giulia Laco – WCEU2023

HYPHENATION AND LANGUAGES

https://sillabazione.glitch.me/ Giulia Laco – WCEU2023

HYPHENATION AND LANGUAGES

https://sillabazione.glitch.me/ Giulia Laco – WCEU2023

3.1.5 READING LEVEL

3. 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

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”

Giulia Laco – WCEU2023

CONCEPTS

VISIBILITY (perceptibility) LEGIBILITY (decoding) READABILITY (ease of reading):

• CONTENT READABILITY (easy to understand)
• TYPOGRAPHIC READABILITY (pleasant to read)

Giulia Laco – WCEU2023

LEGIBILITY & READABILITY

DEFINITIONS Giulia Laco – WCEU2023

LEGIBILITY

(DECODING) “Can you read it?” — Stephen Coles

Giulia Laco – WCEU2023

CHARACTER ANATOMY

ascendent font-size visible height x-height axis descendent serif baseline aperture

Giulia Laco – WCEU2023

AMBIGUOUS SHAPES OR PROPORTIONS

Giulia Laco – WCEU2023

0O comparison

Giulia Laco – WCEU2023

9g comparison

Giulia Laco – WCEU2023

1Illinois comparison

Giulia Laco – WCEU2023

kering keming comparison

Giulia Laco – WCEU2023

Rhythm and letter spacing

Giulia Laco – WCEU2023

minimum comparison

Giulia Laco – WCEU2023

OTHER POTENTIALLY AMBIGUOUS SHAPES

Giulia Laco – WCEU2023

bdpq comparison (sans serif)

Giulia Laco – WCEU2023

bdpq comparison (serif)

Giulia Laco – WCEU2023

READABILITY

Giulia Laco – WCEU2023

CONTENT READABILITY

“Can you understand this text?”

Giulia Laco – WCEU2023

TYPOGRAPHIC READABILITY

“Would you like to read this text?” — Stephen Coles

Giulia Laco – WCEU2023

READABILITY

READING EXPERIENCE is a subset of USER EXPERIENCE

Giulia Laco – WCEU2023

READABILITY

UX = USER EXPERIENCE CX = CUSTOMER EXPERIENCE RX = READER EXPERIENCE

Giulia Laco – WCEU2023

HOW DO WE READ?

TECHNICAL ASPECTS Giulia Laco – WCEU2023

THE PHYSICAL SIDE OF READING

Giulia Laco – WCEU2023

HOW WE READ: THE PHYSICAL SIDE

EYES Giulia Laco – WCEU2023

HOW WE READ: THE PHYSICAL SIDE

BRAIN Giulia Laco – WCEU2023

THE EYE MOVEMENTS

Giulia Laco – WCEU2023

FIXATIONS

HOW WE READ

Giulia Laco – WCEU2023

SACCADES

HOW WE READ

Giulia Laco – WCEU2023

VERTICAL FOCUS

HOW WE READ

Giulia Laco – WCEU2023

SACCADES AND FIXATIONS

HOW WE READ – Sofie Beier,–Sofie 2022 Beier Giulia Laco – WCEU2023

ACUITY OF FOVEAL VISION

HOW WE READ https://en.wikipedia.org/wiki/Eye_movement_in_reading Giulia Laco – WCEU2023

RETINA, MACULA AND FOVEA

HOW WE READ

Giulia Laco – WCEU2023

MACULA AND FOVEA

HOW WE READ

Giulia Laco – WCEU2023

SACCADED AND FIXATIONS

HOW WE READ

Giulia Laco – WCEU2023

MENTAL PROCESSES

Giulia Laco – WCEU2023

LETTER AND WORD RECOGNITION

HOW WE READ https://www.youtube.com/watch?v=xAzFiyqNO4w –Sofie Beier

Giulia Laco – WCEU2023

WORD RECOGNITION

HOW WE READ Giulia Laco – WCEU2023

quote

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

WHAT WE READ

TYPES OF READING Giulia Laco – WCEU2023

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

Giulia Laco – WCEU2023

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

Giulia Laco – WCEU2023

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

Giulia Laco – WCEU2023

CSS PLAYGROUND FOR BODY TEXT TYPESETTING

https://bit.ly/css-readability.

Giulia Laco – WCEU2023

FIGMA PLAYGROUND FOR BODY TEXT TYPESETTING

https://bit.ly/figma-readability

Giulia Laco – WCEU2023

PARAGRAPH TYPESETTING

Giulia Laco – WCEU2023

PARAGRAPH TYPESETTING

font-size line-height paragraph width

Giulia Laco – WCEU2023

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

font size line height line length

• M. Latin, Better web typography for a better web

Giulia Laco – WCEU2023

LINE LENGTH & VISION

Giulia Laco – WCEU2023

RETINA, MACULA AND FOVEA

HOW WE READ

Giulia Laco – WCEU2023

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

HOW WE READ “7-8 saccadic movements per line are ideal”

– Bruno Maag

Giulia Laco – WCEU2023

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)

R. Bringhurst, The elements of typographic style

Giulia Laco – WCEU2023

FONT-SIZE

Giulia Laco – WCEU2023

CSS FONT-SIZE

The actual font size depends on the font

Giulia Laco – WCEU2023

CSS: NEW PROPERTIES

font-size-adjust @font-face size-adjust

Giulia Laco – WCEU2023

VARIABLE FONTS

TYPOGRAPHIC REVOLUITION Giulia Laco – WCEU2023

FONT FILES

STATIC FONTS many files

VARIABLE FONT one file

Giulia Laco – WCEU2023

VARIABLE FONTS: VARIATION AXES

REGISTERED AXES CUSTOM AXES

Giulia Laco – WCEU2023

USEFUL AXES

Giulia Laco – WCEU2023

VARIABLE FONTS: VARIATION AXES

WEIGHT Nunito by Vernon Adams Giulia Laco – WCEU2023

VARIABLE FONTS: VARIATION AXES

WEIGHT WIDTH Amstelvar Alpha by David Berlow Giulia Laco – WCEU2023

VARIABLE FONTS: VARIATION AXES

OPTICAL SIZE OPTICAL SIZE + FONT SIZE Amstelvar Alpha by David Berlow Giulia Laco – WCEU2023

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

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

VARIABLE FONTS: GRADE AXIS

GRAD Giulia Laco – WCEU2023

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

LXND https://www.lexend.com/ Giulia Laco – WCEU2023

READABILITY RESEARCH

Giulia Laco – WCEU2023

THE READABILITY CONSORTIUM

READABILITY RESEARCH

Giulia Laco – WCEU2023

SANDBOX: READABILITY PLAYGROUND

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

SANDBOX: READABILITY PLAYGROUND

some samples Giulia Laco – WCEU2023

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

READABILITY RESEARCH

https://www.thereadability.group/

Giulia Laco – WCEU2023

READABILITY: A COMBINED EXPERIENCE

READABILITY RESEARCH

TYPOGRAPHY ACCESSIBILITY BRANDING https://www.thereadability.group/

Giulia Laco – WCEU2023

…

Giulia Laco – WCEU2023

BIONIC READING®

NEW IDEAS

Giulia Laco – WCEU2023

BIONIC READING®

https://bionic-reading.com/ Giulia Laco – WCEU2023

BIONIC READING®

font size font family letter spacing fixation intensity line spacing saccade width lightness line width

Giulia Laco – WCEU2023

WORKSHOP PLAYGROUNDS

Giulia Laco – WCEU2023

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

Giulia Laco – WCEU2023

PLAYGROUNDS

Giulia Laco – WCEU2023

VARIABLE FONTS PLAYGROUND

https://www.axis-praxis.org/ Giulia Laco – WCEU2023

VARIABLE FONTS PLAYGROUND

https://v-fonts.com/ Giulia Laco – WCEU202

READABILITY PLAYGROUND - SANDBOX

https://readabilitymatters.org/sandbox Giulia Laco – WCEU2023

TOOLS

Giulia Laco – WCEU2023

FONT TOOLS

https://wakamaifondue.com/ Giulia Laco – WCEU2023

LINKS

Giulia Laco – WCEU2023

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

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

Pixabay.com Flickr.com Giulia Laco – WCEU2023

COLOPHON