Basic Typography
Typography is the style and appearance of written words. Good typography benefits the reader and can help keep their attention for longer. When done properly, typography can make text more readable and engaging.
Using CSS, typography can be controlled to create beautiful and usable websites. Text can be styled significantly with CSS alone.
Rules to Remember
Some of the most important styles to keep in mind are point size, line spacing, and line length. Avoid small and unreadable point sizes. Line spacing, or line height, should be approximately 1.5 in the CSS. Line length should not exceed 10-15 words as lengthy lines are less likely to be read and understood.
Choose one to two fonts carefully. Try to avoid fun fonts, system fonts, and monospaced fonts. When deciding on a font, choose easily readable fonts especially for body text. Headings can be more attention grabbing but should still be readable.
To maximize readability and usability, chunk text into easily readable succinct sections. Align the text to the left and use centered text sparingly. Organizing the text into a visual hierarchy will also help with readability and the creation of rhythm. Using difference with emphasis, color, and weight can create rhythm and repetition in a page along with successful visual hierarchy.
Avoid underlining text for emphasis. Italics are the best choice for emphasis, but bold may be used in some cases as well.
Consider proportions, contrast, and spacing on the page when making typography choices. Be sure to include padding in div elements that have borders.
Final Considerations
Consider the tone of your website and create typography that reflects that tone. Pay attention to how different fonts play off of each other.