Typographical considerations that designers should know and implement
When designing user interfaces, you must keep things like proper readability, appropriate spacing, line heights, and users with low vision in mind. Accessible typography is one of the most crucial components of design to understand and implement correctly. Designers should be implementing style guides containing typography details, best practices, and standards for components to help bring accessible interfaces to organizations.
Choosing a Typeface
A well-chosen font can give your organization credibility, users increased reading pleasure, and trigger different emotions.
Aesthetics
Make sure the typeface is well suited for the audience it is intended. Think about what each font says to you and make sure it aligns with the goal, organization, or overall mood of the application.
Experiment
Try out the typeface on your design, so you can see it in the context of the structure of your application. Either use software like Sketch to see the changes or if you are working in the browser, create a SASS variable to easily swap out the fonts globally. I find that this is the best way for me to choose fonts.
Read Them
While you are experimenting with different fonts, it is important to read them. Actually read them by spending time reading large amounts of text. You will be able to quickly eliminate fonts that don’t fit by simply doing this one thing.
Trust Your Gut
Sometimes the choice of fonts doesn’t have to be a mostly technical ordeal. Many times you will just see the perfect font for your design when you see it.
Lastly, I suggest using sites like Typ.io to help you find nice font combinations that others are using.
Color & Contrast
Some users with low vision will adjust the contrast levels of their screens. To accommodate for this, designers should ensure that their applications meet WCAG 2.0 level AA requirements at a minimum. This requires a contrast ratio of 4.5:1 for normal text and 3:1 for large text (14 point and bold or larger, or 18 point or larger).
This can easily be verified by using a WebAIM’s Contrast Checker. I also recommend that designers begin the design process by using accessible color palettes.
Most typefaces were designed to be printed with black ink on a light background, so you need to be careful when choosing a typeface reversed out of a dark background. Keep in mind font weight, style, and overall readability when your background is dark.
Line Length
Body Text
The optimal line length for your body text is considered to be 50-60 characters(Baymard). I use the Word & Character Count chrome extension to see how long lines are. Personally, I prefer the characters per line to be between 60 and 80 characters when I am reading.
Short Lines
For short lines, the optimal line length is considered to be about 15-30 characters
Text Styles
Designers should limit the number of text sizes and styles to keep a clean and readable feel to their applications. Frameworks like Bootstrap, Materialize, and Material Design Lite will have base typographic scales already built in for developers. Google recommends having a basic set of styles that are based on a typographic scale of 12, 14, 16, 20, and 34.
For further reading, I would recommend going through Google’s Design Spec and IBM’s Design Language.
