Akshay Shah
By Akshay Shah
1 2 Introduction
Anatomy of Typeface
2 1.1 / What is Dyslexia?
11 2.1 / The Anatomy of Letterforms
3 1.2 / Effects of Dyslexia
13 2.2 / Typefaces for the Dyslexic
5 1.3 / Issues faced whilst reading Typefaces
3 4 Dysign
Conclusion
23 3.1 / Dyslexie - Christian Boer
51 4.1 / Conclusion
33 3.2 / Dyslexic - Daniel Britton 39 3.3 / Read RegularTM - Natascha Frensch 45 3.2 / Lexia Readable - Keith Bates
Introduction
2 1.1 / What is Dyslexia? 3 1.2 / Effects of Dyslexia 5 1.3 / Issues faced whilst reading Typefaces
1
1.1 / What is Dyslexia?
D
yslexia is a
common learning difficulty that can cause
problems with reading, writing and spelling. Dyslexia is a “specific learning difficulty”, which means it causes problems with certain abilities used for learning, such as reading and writing.
It’s estimated that up to 1 in every 10 to 20 people in the UK has some degree of dyslexia. Dyslexia is lifelong problem that can present challenges on a daily basis, but support is available to improve reading and writing skills and help those with the problem be successful at school and work.
2
1.2 / Effects of Dyslexia Dyslexia can make a number of tasks other than reading difficult. Here’s an overview of skills and behaviours dyslexia can affect.
Reading Dyslexia may also affect the ability to read smoothly, “sound out” and pronounciate words making it difficult to get interested in stories and books. In addition, word problems in math may prove challenging.
Socialising Dyslexia frequently has problem with socialising; making friends and dealing with peer pressure make expressing feelings difficult. It also affects the ability to “fit in” with age mates and interpret body language.
3
Language People who have Dyslexia often have trouble following directions, name people and objects, pronounce words properly making it difficult for them to communicate with confidence. In addition to this they may not be able to distinguish between words that sound similar, learn and correctly use new words and grammar.
Writing People with Dyslexia generally master how to write letters, numbers and symbols correctly in order to grasp the rules of spelling and grammar. The Dyslexic proofread written work and will express ideas in an organised way. Lastly, they listen and take notes that will allow them to fully understand content.
4
1.3 / Issues faced whilst reading Typefaces
As designers, we can help dyslexic users read text better by avoiding the bad design practices that affect them. Seeing things from their eyes can give us a better perspective on why accessible design is so important.
When dyslexic users read text, sometimes they can experience visual distortion effects. These effects vary in degree from person to person, but they can make reading text that much harder.
There are six bad practices that are likely to cause these visual distortion effects for dyslexic users.
5
The River Effect Dyslexic users may sometimes see the river effect This
in is
the
when
text large
they’re gaps
reading.
occur
within
consecutive lines of text. It can look like a river of whitespace flowing down the words on a
page.
There
are
a
few
bad
practices that make the river effect happen. Justified text / Justified text is difficult to read for dyslexic users. This is because it creates large uneven spaces between letters and words. When these spaces line up above one another, a distracting river of whitespace can appear. This can cause dyslexic readers to repeatedly lose their place when reading. You can avoid creating the river effect by using left-aligned text, instead of justified text for your paragraphs
6
1.3 / Issues faced whilst reading print or digital typeface
The Blur Effect This is when dyslexic readers see their text blurring or swirling or together. This can significantly affect a dyslexic user’s reading ability, and make reading tiring for them. You can lessen this effect by avoiding a couple of bad practices. Pure black text on a pure white background / There is a reason the text on this page is not pure black (#000000), and the background is not pure white (#FFFFFF). It’s because many dyslexic users are sensitive to the brightness high contrast colours cause. This can cause the words to swirl or blur together. To avoid this, use an off-white colour for your background, like light gray or tan. You can also use a dark grey for your text instead of pure black to cut the glare even more.
7
The Washout Effect Sometimes dyslexic users can experience
Serif Typefaces / A sans-serif font allows dyslexic users to see shapes of letters clearer, because the lack of hooks increases the spacing between letters and makes them more distinct.
the washout effect. When Whenthis thishappens, happens, the thetext textlooks looksfaint faint
Serif fonts have hooks at the ends of the letter strokes. They look decorative, but tend to obscure the shapes of letters, making the letters run together.
and andindistinct. indistinct.
This can make reading slower and cause dyslexic users to guess
Italicized text / Italics are often used to highlight text. However, they make letters hard to read. The letters have a jagged line compared to non-italic fonts. The letters also lean over making it hard for dyslexic users to make out the words
what a word is because of the diffic lty seeing it To lessen this effect, you
A better way to highlight is to use bold text because the letters are clearer and give better contrast.
should avoid with your text.
8
Anatomy of Typeface
11 2.1 / The Anatomy of letterforms 13 2.2 / Typefaces for the Dyslexic
2.1 / The Anatomy of Letterforms
Each individual letter is called a character. A standard set of terms is used to describe the constituent parts of a character, often referred to as typeface anatomy. Capital letters are called caps or uppercase. 11
Small letters are called lowercase. The terms upper and lowercase come from metal setting, when the type case containing the capitals would sit above that containing the smaller letters. 12
2.2 / Typefaces for the Dyslexic
Deslexic readers often prefer typefaces that have good ascenders and descenders; letters such as “b”, “d”, “f”, “h”, “k”, “l”, “t” and “g”, “j”, “p”, “q”, “y” are good examples of this. They will also prefer typefaces where the letters “b” and “d” and “p and q” are distinguished and not mirror images. Different forms for capital “I”, lowercase “l” and digit 1 also help Dyslexic users read better. Lastly, The space between each letter should not be very close, e.g. “r”, “n” together rn should not look like “m”, (‘modern’ may scan as, or sound like, ‘modem’.)
13
A research by the British Dyslexia Association studied which typeface dyslexic people prefer, for PDF files, web and print. For word-processed files on-screen, they like set their own preferences of style, size, colour and background colour, so typefaces found on Microsoft Word were the most useful format. In order to tell which typefaces are ideal for Dyslexic users common words such as “I’ll”, “Modern” and “Abduct” will be used to illustrate if the typeface meets the most preferred aspects of an ideal typeface.
I’ll, modern ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 Ms Office / Arial / Students are often required to use Arial, so they get used to it and state a preference for it. Arial comes early in the alphabetical list of options. You can get more on a page, because the letters are too close together! Note how the rounded character “g” is good which means the character will not be confused with the letter “o”, the letters “r”and “n” however, are very close. There is also very little differentiation between the uppercase letter “I” and the lowercase letter “i” which may make reading difficult for Dyslexic users.
14
2.2 / Typefaces for the Dyslexic
I’ll, Modern ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 MS Office / Verdana / Verdana is a font that is used extensively for web sites. The ascenders and descenders are reasonable, the letters “b” and “d” are again mirror images of each other. However, this typeface does distinguish the uppercase letter “I”, the lower case “l” well when compared to other font types used by Dyslexic users.
I’ll, Abduct ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 MS Office / Century Gothic / The research by the British Dyslexia Association showed that some Dyslexic users like this typeface, perhaps for the roundness of all the letters. It is good that the letter “n” is not a vertical reversal of “u”; however, the letters “b” and “d” are a mirror image of each other.
15
m rn MS Office / Verdana / The letters “r” and “n” when placed together often make the letters read as “m” which makes reading some words difficult for dyslexic users.
bd MS Office / Century Gothic / The letters “b” and “d” are a mirror image of each other, which may make it confusing for dyslexic readers to distinguish between the two.
16
2.2 / Typefaces for the Dyslexic
I’ll, Modern
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 MS Office / Comic Sans / Comic Sans is the most popular Microsoft font for children. However, some dyslexic users consider it looks childish. It was designed for comic strips and it is often not considered professional in the publishing or academic worlds. Although, it does meet all dyslexic ‘preferences’ except that the typeface has a mirrored “b” and “d”.
I’ll, Modern ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 MS Office / Trebuchet / Trebuchet has short descenders but reasonably long ascenders and has slight differences between the upper case “I” and lowercase “l”, but with most common typefaces the letters “b” and “d” are mirrored.
17
I’ll, Modern
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 MS Office / Calibri / User have often asked about the Calibri typeface. Some preferences from the study were been noted. Compared to other typefaces is considerably smaller and has a ‘double-story g’. Uppercase letters are considerably shorter than the ascenders.
People with Dyslexia often unconsciously switch, rotate and mirror letters in their minds. Traditional typefaces make this worse, because they base some letter designs on others, inadvertently creating “twin letters” for people with dyslexia.
18
2.2 / Typefaces for the Dyslexic
06, 09 Free Font / Lexia Readable / Lexia Readable has different shapes for the numbers “6” and “9”. Which allows dyslexic users to differentiate between the two numbers.
I’ll, Modern ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 Free Font / Lexia Readable / Lexia Readable is free downloadable for personal, school, college and charity use. It has different shapes for the numbers “6” and “9”. It has all the points preferred in a typeface for dyslexic users.
19
I’ll
Free Font / Open-Dyslexic / Open-Dyslexic distinguishes the uppercase letter “I” and lowercase letter “l” making dyslexic users able to recognise letters better.
I’ll, Modern
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 Free Font / Open-Dyslexic / Open-Dyslexic is a free, open source font. It can be used on webs and in Microsoft Office. The typeface has “heavy-weighted bottoms” to prevent them from flipping and swapping around in the minds of dyslexic readers.
20
Dysign
23 3.1 / Dyslexie - Christian Boer 33 3.2 / Dyslexic - Daniel Britton 39 3.3 / Read RegularTM - Natascha Frensch 45 3.4 / Lexia Readable - Keith Bates
Dysle 23
exie
24
3.1 / Dyslexie - Christian Boer
Christian Boer Graphic Designer Christian Boer is a graduate from the Utrecht Art Academy (2008). During his school years he tried to avoid thinking about everything related to reading and dyslexia, but then he started thinking about solutions. He first considered the idea of a colored letter layout. He then learned about rotating and reversing letter imagining and came to the following conclusion: people with dyslexia have problems recognising letters and 2D objects. This problem does not occur if they see 3D objects. That is when the idea came to him to design the Dyslexie font. From this premise, all letters are approached as 3D objects and then transformed to 2D letters.
25
Year of Birth / 1981 Nationality / Dutch
A
ll the basic rules of how a font should be developed were thrown overboard. Christian Boer worked on the font day and night for six months. After six months he developed the foundation for the font with great success. He graduated with a “bachelor with honors� in graphic design at the HKU University of the Arts in Utrecht.
People with Dyslexia often swap, rotate and flip letters without noticing, this is because some letters are too similar to each other Dyslexie is designed so that every letter is unique. This counters the rotation, flipping and reversal of the letters. In addition, Dyslexie has extra distance between letters (kerning) and between words (spaces).
26
3.1 / Dyslexie - Christian Boer
Aa Bb Cc D
Hh Ii Jj Kk L
Pp Qq Rr S Ww Xx 1 2 3 4 5
.,!?@£$ Christian Boer / Dyslexie / Dyslexie uses a heavier line thickness to emphasize the bottom of most characters. This is to try and ‘anchor’ the letters since some people with dyslexia may see letters either moving or in three dimensions. Since dyslexics tend to get “b”, “d, ” p”, and “q” mixed up, it also emphasises a slight slant downwards on the curvature of the letters.
27
Dd Ee Ff Gg
Ll Mm Nn Oo
Ss Tt Uu Vv Yy Zz 6 7 8 9 0
$%^&*() Letters such as c or e may gape slightly more, or slump slightly in one direction. Also, in letters such as “n” or “h”, the font slightly elongates or diminishes the stem on the letters. So the letter “h” would have a longer line, and “n” would have a lower line. In addition, the font also thickens or bolds capital letters and punctuations, so that it is easier to identify when a sentence starts or ends.
28
3.1 / Dyslexie - Christian Boer
Heavy Bottom / Dyslexie is a typeface that shows letters can be viewed as three dimensional objects. If letters are three dimensional, then gravity comes into play. Dyslexie weighs down the bottom of each letter, in order to prevent it from tipping upside down.
Slanted Parts / Charaters in the Dyslexie typeface which look quite similar have been adapted by changing the tails, to reduce the similarity and avaid the problem of mirror letters.
29
Bigger Openings / The openings within letters have been given more breathing room. These airier letters are more distinctive, so it is easier to see them as unique letterforms.
Longer Ascenders and Descenders / By lengthening the ascender and descender of letters, the difference is emphasized. So it is easier to see them as unique letterforms.
30
3.1 / Dyslexie - Christian Boer
Bold Capitals / To prevent sentences from running together, punctuation marks and capital letters are much bolder in the Dyslexie typeface.
Different Heights / Twin letters now have unique features so that they no longer resemble each other entirely. Here, the inner corners of the letters appear at different heights and angles.
31
Higher X Axis / The openings within letters have been given more breathing room. These airier letters are more distinctive, so it is easier to see them as unique letterforms.
Better Spacing / The Dyslexie font has extra distance between letters and between words. This makes reading easier and helps avoid the crowding effect.
32
33
34
3.2 / Dyslexic - Daniel Britton
Daniel Britton D
aniel
britton is a Graphic Designer who has Dyslexia. Daniel created a
project on Dyslexia that would allow an understanding and a sense of empathy between non-Dyslexics to Dyslexics.
With his project Daniel breaks down a typeface down to the reading time of a non-dyslexic to the speed of a dyslexic, allowing non-Dyslexic people to understand what it is like to read with the condition and to recreate the frustration of reading everyday text, in turn to creating a better understanding of the condition to non-Dyslexic people.
35
Year of Birth / 1981 Nationality / British
36
3.2 / Dyslexic - Daniel Britton
Daniel Britton / Dyslexic / The Dyslexic typeface was created by slicing the commonly used Helvetica typeface. Daniel removed up to 40% of each letter and number, removing their key characteristics but leaving enough to make them just about legible.
37
38
39
40
3.3 / Read RegaularTM - Natascha Frensch
Natascha Frensch T
he font
read regular was designed by Natascha Frensch from Delft, in the
Netherlands. Natascha, who has dyslexia, came up with the idea while studying at the Royal College of Arts in London. The typeface makes each letter significantly unique so that dyslexic people can more easily distinguish one character from another. Additionally, Read Regular features simplified forms and extended openings in letters like “c” and “e”.
41
Year of Birth / 1975 Nationality / Dutch
42
3.3 / Read RegaularTM - Natascha Frensch
Natascha Frensch / Read Regular / This typeface is designed with the idea of simplifying each letter, the letters are broken down to their simplest forms, making them easier to distinguish from each other.
43
Letters Designed for Legibility / Letters in Read Regular have sharp contours, to ensure that each letter stands alone. Letters that have ascenders and descenders are longer to ensure their legibility. Where as larger openings can be found in letters such as “a”, “e”, “o” and “u”. The letters “e” and “g” are also wider which gives Read Regular a friendly character with an even balance between the negative and positive space used.
A Simplistic Design / This typeface is designs each letter individually, where only the essentials of each letter are used. This makes letters easier to distinguish from one another. For example, the letter “b” is not a mirrored version of the letter “d”, there is a subtle difference made to the curve. The letters are stripped of all unnecessary details.
44
Lexia Re 45
eadable 46
3.4 / Lexia Readable - Keith Bates
Keith Bates L
exia
readable is by Keith Bates at K-Type, Lexie Readable (formerly Lexia
Readable) was designed as a more mature Comic Sans font, suitable for older readers. It’s an attempt to retain the strength, friendliness and legibility of Comic Sans, and even a slightly marker-drawn feel, whilst tidying up the comic book characteristics. It was designed to be more legible at font sizes as small as 8 points.
47
Year of Birth / 1951 Nationality / British
48
3.4 / Lexia Readable - Keith Bates
Aa Bb Cc Dd Ee Kk Ll Mm Nn O Tt Uu Vv W 1 2 3 4 5 .,!?@£$ Keith Bates/ Lexia Readable / Lexie Readable was designed in an attempt to capture the strength and clarity of Comic Sans without the comic book associations. Features like the non-symmetrical letters “b” and “d”, and the handwritten forms of the letters “a” and “g” may help dyslexic readers.
49
e Ff Gg Hh Ii Jj Oo Pp Qq Rr Ss Ww Xx Yy Zz 6 7 8 9 0 $^&*() Lexia Readable has long ascenders that equal the cap height, and similarly long descenders, it also has an x-height that is just slightly above the median. These features all make Lexia easy on the eyes—and easy on the brain for early readers and readers with Dyslexia.
50
4.1 / Conclusion Dyslexia is a specific learning disability
This book was aimed to visually
that makes its very difficult for people
communicate Dyslexia as a
to read, write and spell. As a designer,
misunderstood condition rather than
there is no one particular design
as a disability. Giving designers tips
method that is best suited for people
on what traditional design methods to
who have Dyslexia. However, the most
avoid whilst designing for dyslexic us-
important element to consider is
ers to noting down typefaces which are
typography. Using typefaces that are
designed to help dyslexic people read
elaborate makes it harder for Dyslexic
and write in order to communicate
readers to break down each letter
better in their daily lives.
making the process of reading slower when compared to a non-dyslexic
Dyscover Dyslexia is designed to
reader. Traditional typefaces tend to
illustrate how frustrating it is to try and
have twin letters and are commonly
read something simple by showcasing
derived from a set of vertical,
designs that either have Dyslexia or
horizontal, diagonal and rounded
have tried to recreate or stimulate the
strokes. They are usually replicated for
emotions of reading with Dyslexia.
neatness and consistency within the typeface. Dyslexic readers will often unconsciously switch, rotate and mirror these letters in their mind, as the letters tend to look more similar to each other.
51
52
Books I Wonder What It’s Like to be Dyslexic? Sam Barclay
Websites bdatech.org danielbritton.info/projects dyslexiaaction.org.uk dyslexiefont.com k-type.com natascha-frensch.nl uxmovement.com sambarclay.co.uk understood.org
Images Front Matter - behance.net Page 52 - madebysawdust.co.uk
Inde
A
E
L
Anatomy of Letterforms / 11 Arial / 14 Ascender / 12 Axis / 11
Ear / 12 Effects of Dyslexia / 3
Leading / 11 Lexia Readable / 19, 45–50 Link or Neck / 11 Loop or Lobe / 12
B
G
M
Baseline / 12 Blur Effect / 7 Bowl / 11 Bracket / 12 British Dyslexia Association / 14
Graphic Designers / 25, 35, 41, 47
Ms Office / 14–18
C
I
Calibri / 18 Century Gothic / 15 Christian Boer / 25 Comic Sans / 17 Counter / 12 Crossbar / 11
Italic / 12
D
K
O
Daniel Britton / 35 Descender / 12 Design Practices / 5 Dyslexia / 2, 18 Dyslexic / 33–38 Dyslexie / 23–32
Keith Bates / 47 Kerning / 11
Open-Dyslexic / 20
N Natascha Frensch / 41
R
W
Read Regular / 39–44 River Effect / 6
Washout Effect / 8
S
X
Sans Serif / 11 Shoulder / 12 Stem / 11
X Height / 12
T Terminal / 12 Trebuchet / 17
V Verdana / 15
Listen to the rhythm of the invisible Typography.