Text

Paragraph and other text-based elements

Demo

This is a paragraph with some bold text and some italic text. More text variations can be done using the utility classes.

This is something somebody said.

This is for small print, side-comments, disclaimers, etc.

API

Tags

Name Type Content
p Native element Any
blockquote Native element p element for the actual quotation
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.

To demonstrate, the paragraph above has no width limit while that same paragraph below maxes out at 75ch using the txt-maxlength utility class:

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 these text semantically will improve SEO and accessibility.

Accessibility

The smallest font size that Mdash has is 13px, which is the smallest recommended by WCAG 2.1. Any smaller can be illegible for some users.