Evo

Text Size

Unstyled text sizes on a modular scale.

text-size-[number]

15 Design Made Simple
14 Design Made Simple
13 Design Made Simple
12 Design Made Simple
11 Design Made Simple
10 Design Made Simple
9 Design Made Simple
8 Design Made Simple
7 Design Made Simple
6 Design Made Simple
5 Design Made Simple
4 Design Made Simple
3 Design Made Simple
2 Design Made Simple
1 Design Made Simple
<h1 class="text-size-1">Design Made Simple</h1>

Create a container for your text such as a <p> tag or <h1> tag, and apply a text-size-[number] class such as text-size-1 (smallest size) or text-size-15 (largest size). text-size-reset will set the font-size to 'initial'.

You may see legacy classes that begin with text-size-[number] such as text-size-15. These have been temporarily deprecated, but in the future may be used by mixins or feature opinionated styles for tracking, leading, etc.

text-size-[number]-screen-[size]

Example Responsive Text

Text size utilities adapt the size of your text to specific media query states. These range from extra-small to extra-large such as the text-size-[number]-screen-extra-small class (smallest screen size) to text-size-[number]-screen-extra-large (largest screen size). Use text-size-reset-screen-[size] to set the font-size to 'initial' such as text-size-reset-screen-medium. Default media query states can be adjusted in _evo_variables.scss

Example Responsive Text
<div class="text-size-14-screen-extra-large text-size-13-screen-large text-size-12-screen-medium text-size-10-screen-small text-size-8-screen-extra-small evo-color evo-transition text-truncate">Example Responsive Text</div>

Add a transition class such as evo-transition to smooth out the transition from one size to another. Resize your browser window to see this in action.