| Page Properties | ||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Introduction
Typography helps us to create hierarchies, organize information, and guide our users through pages. The Typography component makes it easy to apply a default set of font weights and sizes within your website.
...
Anatomy
...
Editorial
Provide enough contrast between text and its background colors.
For font size use relative units to accommodate the user settings.
Don't skip heading levels. In order to solve this problem, consider separating the semantics from the style.
...
Usage
Do
...
Text usually is left aligned, but not for all languages.
...
In some cases you'll have to center or right aligned.
...
Do’s
Whenever possible, use left aligned text.
Use the underline style to link text in the body to show when text is clickable.
Don’t do
...
Don’ts
Unless absolutely necessary, don’t use right aligned, centered , or justified text.
Break the Don’t break words.
Leave Don’t leave short words hanging.
Include Don’t make big indents on single lines.
Over extended words.
All caps are difficult to read, they make the reading speed slower than title or sentence case.
Accessibility
A few rules to follow for an accessible typography:
Color. Provide enough contrast between text and its background.
Font size. Use relative units to accommodate the user's settings.
Heading hierarchy. Don't skip heading levels. In order to solve this problem, you need to separate the semantics from the styleDon’t use caps excessively.