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
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.