Unstyled text sizes on a modular scale.
<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 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
<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.