Typographic Readability in Theme Design & Development
PLEASE TAKE A SEAT
WordCamp Europe 2023
Abstract (dark mode)
Abstract (light mode)
Abstract 2 (light mode)
NICE TO MEET YOU (dark mode)
NICE TO MEET YOU (light mode)
Takeaways (dark mode)
Takeaways (light mode)
FACTORS THAT INFLUENCE READING
FACTORS AFFECTING READING
COMMON FACTORS THAT INFLUENCE READING
PERSONAL CONDITIONS THAT INFLUENCE READING
TYPOGRAPHIC PROPERTIES THAT INFLUENCE READING
PLAYGROUNDS
CSS PLAYGROUND
FIGMA PLAYGROUND
DEFINITIONS
CONCEPTS
WCAG 2.1
ALL ACCESSIBILITY GUIDELINES
TEXT & READABILITY IN WCAG 2.1
CONFORMITY LEVELS
FOUR PRINCIPLES
TEXT & READBILITY IN WCAG 2.1
1. PERCEIVABLE
1. PERCEIVABLE 1.4 DISTINGUISHABLE
IMAGES OF TEXT
1.4.5 IMAGES OF TEXT
1.4.9 IMAGES OF TEXT (No Exception)
Don't use images of text unless you can't do otherwise
CONTRAST
1.4.3 CONTRAST (Minimun)
1.4.6 CONTRAST (Enhanced)
MINIMAL CONTRAST RATIO WITH THE BACKGROUND
What does “large text” mean?
*LARGE SCALE TEXT definition
CSS UNITS: POINT VS. PIXEL
But do we really know what a pixel is?
MEASUREMENT UNITS: PHYSICAL VS. VIRTUAL PIXEL
MEASUREMENT UNITS: ORIGIN OF THE VIRTUAL PIXEL
MEASUREMENT UNITS: ORIGIN OF THE VIRTUAL PIXEL
CSS PIXEL DEFINITION
CSS DEFINITION: THE REFERENCE PIXEL
DISTANCE AND SIZE PERCEPTION
DISTANCE AND FONT-SIZE
RESPONSIVE WEB TYPOGRAPHY
RESPONSIVE WEB TYPOGRAPHY
But let's go back to the WCAG guidelines
POINT VS. PIXEL
CONVERSION OF POINTS INTO PIXELS
Let's convert the values indicated in the guidelines into pixels
CONVERSION OF POINTS INTO PIXELS
MINIMAL CONTRAST RATIO WITH THE BACKGROUND
* LARGE TEXT
But are we really going to use pixels to set text size?
CSS: UNITS OF MEASUREMENT
CSS UNITS OF MEASUREMENTS: ABSOLUTE UNITS
CSS UNITS OF MEASUREMENTS: RELATIVE UNITS
CSS UNITS OF MEASUREMENTS: RELATIVE UNITS
But are we really going to use pixels to set text size?
1.4.4 RESIZE TEXT
1.4.4 RESIZE TEXT - level AA
DIFFERENCES: SCREEN ZOOM AND TEXT ZOOM
FONT-SIZE IN PIXELS BLOCKS REWRITING
STATIC VS. RELATIVE UNITS
1.4.10 REFLOW - level AA
1.4.10 REFLOW - level AA
1.4.8 VISUAL PRESENTATION - Level AAA
1.4.8 VISUAL PRESENTATION - level AAA
1.4.12 TEXT SPACING - Level AA
1.4.12 TEXT SPACING - level AA
Problem
3.1.1 LANGUAGE OF PAGE - Level A
3.1.1 LANGUAGE OF PAGE - level A
HTML: DEFINE THE LANGUAGE OF THE DOCUMENT
Consequences: hyphenation
HYPHENATION AND LANGUAGES
HYPHENATION AND LANGUAGES
3.1.5 READING LEVEL
3.1.5 READING LEVEL – level AAA
Another meaning of “READABILITY”
CONCEPTS
LEGIBILITY & READABILITY
LEGIBILITY
CHARACTER ANATOMY
AMBIGUOUS SHAPES OR PROPORTIONS
0O comparison
9g comparison
1Illinois comparison
kering keming comparison
Rhythm and letter spacing
minimum comparison
OTHER POTENTIALLY AMBIGUOUS SHAPES
bdpq comparison (sans serif)
bdpq comparison (serif)
READABILITY
CONTENT READABILITY
TYPOGRAPHIC READABILITY
READABILITY
READABILITY
HOW DO WE READ?
THE PHYSICAL SIDE OF READING
HOW WE READ: THE PHYSICAL SIDE
HOW WE READ: THE PHYSICAL SIDE
THE EYE MOVEMENTS
FIXATIONS
SACCADES
VERTICAL FOCUS
SACCADES AND FIXATIONS
ACUITY OF FOVEAL VISION
RETINA, MACULA AND FOVEA
MACULA AND FOVEA
SACCADED AND FIXATIONS
MENTAL PROCESSES
LETTER AND WORD RECOGNITION
WORD RECOGNITION
quote
WHAT WE READ
TYPES OF READING
TYPES OF TEXT ON WEBSITES
TYPES OF TEXT ON WEBSITES
TYPES OF TEXT ON WEBSITES
TYPES OF READING OF WEBSITES
RULES OF TYPESETTING
CSS PLAYGROUND FOR BODY TEXT TYPESETTING
FIGMA PLAYGROUND FOR BODY TEXT TYPESETTING
PARAGRAPH TYPESETTING
PARAGRAPH TYPESETTING
R. Rutter, Web Typography
M. Latin, Better web typography for a better web
LINE LENGTH & VISION
RETINA, MACULA AND FOVEA
MACULA AND FOVEA
SACCADES AND FIXATIONS
LINE LENGHT (measure)
LINE LENGHT (measure)
FONT-SIZE
CSS FONT-SIZE
CSS: NEW PROPERTIES
VARIABLE FONTS
FONT FILES
VARIABLE FONTS: VARIATION AXES
USEFUL AXES
VARIABLE FONTS: VARIATION AXES
VARIABLE FONTS: VARIATION AXES
VARIABLE FONTS: VARIATION AXES
VARIABLE FONTS: OPTICAL SIZE AXIS
VARIABLE FONTS
VARIABLE FONTS: GRADE AXIS
VARIABLE FONTS: GRADE AXIS
VARIABLE FONTS: LEXEND AXIS
READABILITY RESEARCH
THE READABILITY CONSORTIUM
SANDBOX: READABILITY PLAYGROUND
SANDBOX: READABILITY PLAYGROUND
CLUSTERING DIVERSE READING NEEDS
THE READABILITY GROUP
READABILITY: A COMBINED EXPERIENCE
…
BIONIC READING®
BIONIC READING®
BIONIC READING®
WORKSHOP PLAYGROUNDS
CSS PLAYGROUND FOR BODY TEXT TYPESETTING
SOME LINKS
PLAYGROUNDS
VARIABLE FONTS PLAYGROUND
VARIABLE FONTS PLAYGROUND
READABILITY PLAYGROUND - SANDBOX
TOOLS
FONT TOOLS
LINKS
LINKS
LINKS
IMAGE CREDITS
COLOPHON