Automatic.css has a full suite of classes for quickly styling text. All text styling classes start with .text– and use contextually accurate names to make them easy to remember.
Text Size
.text--{size}
Text size classes allow you to change text size anywhere on your site. They work when directly applied to elements, and they also work when applied to containers that house multiple text elements.
Text classes follow the Automatic typography system to be automatically responsive, follow a perfect mathematical scale, and have dual-layer fallback support.
Available sizes: xs, s, m, l, xl, xxl
“Larger” Text
.text--larger
ACSS has a unique class called .text–larger. This class can be applied to any text to make it larger by a set multiplier value.
The multiplier value can be set via the ACSS dashboard in the typography tab:
The multiplier accepts mobile (min) and desktop (max) values. This ensures that .text–larger remains perfectly responsive.
You can set the multiplier values to anything you’d like. Just ensure they’re reasonable values for the design and behavior you’re trying to achieve.
Pro Tip: If you set the multiplier values to exactly half of your fluid typography scale value, you can perfectly scale text sizes in half steps instead of full steps (giving you double the number of text size options). For example, if .text--m is too small but .text--l is too big, you can use .text--m and .text--larger to get the value in between.
Text Color
.text--{color}
Text color classes allow you to change the color of text, whether it’s body text or heading text. They work when directly applied to elements and when applied to containers that house multiple text elements.
Any color in the ACSS color system is available except for transparency colors.
Text Weight
.text--{weight}
Text weight classes allow you to change the font weight of any text, whether it’s body text or heading text. They work when directly applied to elements and when applied to containers that house multiple text elements.
Available weights: 100 – 900.
Text Style
.text--{style}
Text style classes allow you to change the text style, whether body text or a heading. They work when directly applied to elements and they also work when applied to containers that house multiple text elements.
Available styles: italic, oblique.
Text Decoration
.text--{decoration}
Text decoration classes allow you to change text decoration, whether it’s body text or heading text. They work when directly applied to elements and when applied to containers that house multiple text elements.
Available Styles: none, underline, underline-wavy, underline-dotted, underline-double, underline-dashed, overline, line-through.
Text Transform
.text--{transform}
Text transform classes allow you to change the transformation of text, whether it’s body text or heading text. They work when directly applied to elements and when applied to containers that house multiple text elements.
Available Styles: none, uppercase, lowercase, capitalize.
Text Alignment
.text--{alignment}
Text alignment classes allow you to change the alignment of text, whether it’s body text or heading text. They work when directly applied to elements and when applied to containers that house multiple text elements.
Available Styles: left, center, right, justify.