Content is much more readable when proper hierarchy is in place. Use larger sizes for anything that needs to be glanceable, for example: flight numbers, booking references and times. Use smaller sizes for editorial and long form content such as information, and terms.

Further reading:

• https://www.nngroup.com/articles/glanceable-fonts/

Restrict line length to 45 - 75 characters

Further reading:

• http://webtypography.net/2.1.2
• https://baymard.com/blog/line-length-readability

READABILITY IS REDUCED WITH ALL UPPERCASE BECAUSE ALL WORDS HAVE A UNIFORM RECTANGULAR SHAPE, MEANING READERS CAN'T IDENTIFY WORDS BY THEIR SHAPE.

Uppercase text can also interpreted differently by different assistive tech,

Further reading:

• https://accessibility.huit.harvard.edu/design-readability

Underlined text can be mistaken for links.

Further reading:

• https://accessibility.huit.harvard.edu/design-readability

If text is fully justified or center-justified, people may have issues with tracking (finding the beginning of each line of text).

Further reading:

• https://www.boia.org/blog/why-justified-or-centered-text-is-bad-for-accessibility

Before implementing a design ensure that it meets colour contrast requirements.

Contrast Minimum

People with partial sight often have difficulty reading text if the colour contrast between foreground and background colours is not sufficient. 
Using colours that contrast well makes it much easier for people to read content comfortably.

• Small text is 4.5:1 — text smaller than 24px or 19px if bold
• Large text is 3:1 — text larger than 24px or 19px if bold.

People with cognitive disabilities or those with partial sight may have trouble reading text with the authored font family, size and colour. People with low-vision may zoom in a lot, and text within bitmap images gets very pixelated & blurry.

In order to read content comfortably, they may change the visual presentation of the content using their own style sheets.

Text should always be used to present information rather than an image as the presentation of content in an image cannot be changed easily, if required.

If you're provided with an image asset which could be implemented in HTML, recommend this over using the visual asset. Often custom typefaces and visual styling via CSS can achieve the desired effect. If this is not possible and text is included in the image, try to include the text in HTML elsewhere on the page.

Properly marked up headings help screen reader users in particular as they may choose to navigate via page headings (skipping other content), making their journey more efficient.

• Use one H1 for the heading which best describes the page (ideally at the start of the main landmark)
• Use H2s for sections of the page. You can have one or two H2s above the H1, e.g. a hidden H2 for the navigation.
• Use H3s and H4s for sub-sections, and sub-sub-sections etc. Evaluating the appropriate heading level is asking the question: Is this a sub-section of the previous heading? If yes, go down a level (e.g. H3 under an H2). Otherwise use the same level.

Further reading:

• https://www.nomensa.com/blog/how-structure-headings-web-accessibility

Using lists to group content on a page improves accessibility as assistive technologies often report the number of lists on a page as well as the number of items in a list. This helps people using these technologies to build up a mental picture of the page and its content. 
Any bulleted or numbered list must use list markup. Lists can also be useful for sets of items such as navigation items and search results.

Further reading:

• https://webaim.org/techniques/semanticstructure/#lists

Text should be clear and content should not be lost when people with visual impairments or dyslexia override the site's text spacing or font family. Increased spacing or a change of font family may help users to enable readability or increased reading speed. Fixed height containers of text will often break when text-spacing is changed. Use min-height instead.

Text should not overlap or get cut off and fit within its containing box.

It is possible with CSS to reduce the text size for smaller screens, which impacts higher levels of zoom. When using zoom, users should be able to get text to at least 200%.

Please stick to our light font weights within Mylius and Open Sans. Large areas of bold, italic or underlined text can be difficult to read for people with dyslexia. Most screen readers will not announce bold or italic text, so emphasis is lost for those who cannot see the text.

Further reading:

• https://uit.stanford.edu/accessibility/concepts/typography