Text Size

Unstyled text sizes on a modular scale.


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.


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.