Text
Headings, paragraphs, and other text-based elements
Demo
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
This is a paragraph with some bold text and some italic text. More text variations can be done using the utility classes.
This is for small print, side-comments, disclaimers, etc.API
Tags
| Name | Type | Content | |||||||
|---|---|---|---|---|---|---|---|---|---|
h[1-6] |
Native element | Any | |||||||
p |
Native element | Any | |||||||
small |
Native element | Any, but intended to represent "side-comments...small print, like copyright and legal text, independent of its styled presentation." | |||||||
Guidelines
Characters per line
It is recommend that lines of text be no more than 65-75 characters, including spaces (Designing With Type, James Craig). This makes for a more comfortable reading experience. Usability studies dating back to the 1970's show readers experience fatigue with text running longer than this.
SEO
Using text elements semantically improves SEO and accessibility.
Accessibility
The smallest font size that M- has is 13px, which is the smallest recommended by WCAG 2.1. Any smaller can be illegible for some users.