To start off, Typography is the use of type in a design. It seeks to create a greater meaning to a design by the thoughtful and purposeful selection of font, size, color, layout, alignment, and other factors that can affect the design. Specifically for web design, it is important to consider contrast, color, readability, and size for text on the web.
When it comes to readability, you must choose clear and recognizable letter forms. Text is the most legible when it can be easily distinguished between letters. For example, some typefaces are designed to be pleasing to the eye by being slick and rhythmic. When a typeface is legible, they have far more of a distinction and impact among the letters. Sometimes forms that are repetitive can make the text illegible so it is important that each shape should have a distinctive shape. Letters should be airy and open as they are less likely to blur into closed shapes as well as have distinguishable beginning and endings to help the eye recognize individual forms. Body text should also have some contrast between the letter form stroke widths but shouldn’t be so far to where certain strokes begin to disappear.
After choosing a typeface, formatting it for the web and onscreen reading is important for the highest legibility. Decisions like color and size always contribute to the reader being able to read the text. Body text size, leading, line length, and color contrast should be considered. The type size depends on the distance at which a reader is positioned from a screen and while general rules apply, a design should be tested on various screen types and sizes to ensure that text can be read on all of them. Leading, or the space between lines of text depends on the typeface that was chosen but follow that the smaller the typeface, the tighter the leading. With line length, the number of letters in a line can determine the reader’s fatigue so make sure to keep the line length to 45-75 characters per line. Lastly, for the text to be legible, choose colors that have a contrast ratio of at least 4:5:1.
Source 1 Source 2 Photo by Bruno Martins on Unsplash