Skip to main content

Typography Utilities

NuvoUI provides a comprehensive set of typography utilities to control text appearance including font size, weight, alignment, decoration, and text overflow handling.

Configuration​

Typography utilities are built on configurable variables.

Font Sizes​

The system uses a set of predefined font sizes, which can be updated in the Typography Configuration section.

Breakpoints​

Responsive typography variants are based on these breakpoint values:

Font Size​

Control the font size of text using the .text-{size} utilities:

Font Weight​

Control the font weight of text using the .font-{weight} utilities:

Line Height​

Control the line height of text using the .leading-{size} utilities:

Text Alignment​

Control text alignment using the .text-{alignment} utilities:

Text Transform​

Control the text casing using the text transform utilities:

Font Style​

Control the font style using the font style utilities:

Text Decoration​

Add or remove text decorations using these utilities:

Text Overflow​

Control how text overflows its container:

warning

The truncate utility will truncate the text with an ellipsis (...). Do not use padding for multine e.g. truncate-2 or truncate-3

Text Break​

Control how text breaks and wraps:

Whitespace​

Control how whitespace is handled:

Letter Spacing​

Control the tracking (letter spacing) of text:

Responsive Typography​

All typography utilities can be applied conditionally at different breakpoints using the @{breakpoint} suffix:

Typography Utilities Reference Table​

Font Size Classes​

ClassCSS PropertyDescription
.text-xsfont-size: 0.75remExtra small text
.text-smfont-size: 0.875remSmall text
.text-mdfont-size: 1remBase text size (16px)
.text-basefont-size: 1remBase text size (16px)
.text-lgfont-size: 1.125remLarge text
.text-xlfont-size: 1.5remExtra large text
.text-2xlfont-size: 1.75rem2x large text
.text-3xlfont-size: 2rem3x large text
.text-4xlfont-size: 2.5rem4x large text

Font Weight Classes​

ClassCSS PropertyDescription
.font-thinfont-weight: 100Thin font weight
.font-extralightfont-weight: 200Extra light font weight
.font-lightfont-weight: 300Light font weight
.font-normalfont-weight: 400Normal/regular font weight
.font-mediumfont-weight: 500Medium font weight
.font-semiboldfont-weight: 600Semi-bold font weight
.font-boldfont-weight: 700Bold font weight
.font-extraboldfont-weight: 800Extra bold font weight
.font-blackfont-weight: 900Black (heaviest) font weight

Line Height Classes​

ClassCSS PropertyDescription
.leading-noneline-height: 1No line height (tight)
.leading-tightline-height: 1.25Tight line height
.leading-snugline-height: 1.375Snug line height
.leading-normalline-height: 1.5Normal line height
.leading-relaxedline-height: 1.625Relaxed line height
.leading-looseline-height: 2Loose line height

Text Alignment Classes​

ClassCSS PropertyDescription
.text-lefttext-align: leftLeft-aligned text
.text-centertext-align: centerCenter-aligned text
.text-righttext-align: rightRight-aligned text
.text-justifytext-align: justifyJustified text

Text Transform Classes​

ClassCSS PropertyDescription
.uppercasetext-transform: uppercaseAll uppercase text
.lowercasetext-transform: lowercaseAll lowercase text
.capitalizetext-transform: capitalizeCapitalized text
.normal-casetext-transform: noneNormal case text (no transform)

Font Style Classes​

ClassCSS PropertyDescription
.italicfont-style: italicItalic text
.not-italicfont-style: normalNormal text (not italic)

Text Decoration Classes​

ClassCSS PropertyDescription
.underlinetext-decoration: underlineUnderlined text
.line-throughtext-decoration: line-throughStrikethrough text
.no-underlinetext-decoration: noneNo text decoration

Text Overflow Classes​

ClassCSS PropertyDescription
.truncateMultiple propertiesTruncates text with ellipsis in one line
.overflow-labelMultiple propertiesHandles overflow for labels with min-width support
.truncate-2Multiple propertiesTruncates text after 2 lines
.truncate-3Multiple propertiesTruncates text after 3 lines
.truncate-4Multiple propertiesTruncates text after 4 lines
.truncate-5Multiple propertiesTruncates text after 5 lines

Word Break Classes​

ClassCSS PropertyDescription
.break-normalMultiple propertiesNormal word breaks
.break-wordsoverflow-wrap: break-wordBreaks words to prevent overflow
.break-allword-break: break-allBreaks words at any character

Whitespace Classes​

ClassCSS PropertyDescription
.whitespace-normalwhite-space: normalNormal whitespace handling
.whitespace-nowrapwhite-space: nowrapPrevents text from wrapping
.whitespace-prewhite-space: prePreserves whitespace exactly
.whitespace-pre-linewhite-space: pre-linePreserves line breaks, collapses spaces
.whitespace-pre-wrapwhite-space: pre-wrapPreserves whitespace but wraps text

Letter Spacing Classes​

ClassCSS PropertyDescription
.tracking-tighterletter-spacing: -0.05emTighter letter spacing
.tracking-tightletter-spacing: -0.025emTight letter spacing
.tracking-normalletter-spacing: 0Normal letter spacing
.tracking-wideletter-spacing: 0.025emWide letter spacing
.tracking-widerletter-spacing: 0.05emWider letter spacing
.tracking-widestletter-spacing: 0.1emWidest letter spacing

Responsive Classes​

Add @{breakpoint} suffix to any typography class to apply it at a specific breakpoint:

  • .text-xl@md
  • .font-bold@lg
  • .text-center@xl
  • .truncate-3@sm
  • .tracking-wide@md

SCSS Mixins​

NuvoUI provides a comprehensive set of typography mixins for use in your SCSS:

Font Size Mixin​

MixinParametersDescription
@include text-size($size)$size: Size name or valueSets font size from the size map or direct value

Font Weight Mixins​

MixinDescriptionParameters
@include font-thinSets font-weight to 100None
@include font-extralightSets font-weight to 200None
@include font-lightSets font-weight to 300None
@include font-normalSets font-weight to 400None
@include font-mediumSets font-weight to 500None
@include font-semiboldSets font-weight to 600None
@include font-boldSets font-weight to 700None
@include font-extraboldSets font-weight to 800None
@include font-blackSets font-weight to 900None

Line Height Mixins​

MixinDescriptionParameters
@include leading($value)Sets line height$value: Named value or number
@include leading-noneSets line height to 1None
@include leading-tightSets line height to 1.25None
@include leading-snugSets line height to 1.375None
@include leading-normalSets line height to 1.5None
@include leading-relaxedSets line height to 1.625None
@include leading-looseSets line height to 2None

Text Alignment Mixins​

MixinDescriptionParameters
@include text-leftSets text-align to leftNone
@include text-centerSets text-align to centerNone
@include text-rightSets text-align to rightNone
@include text-justifySets text-align to justifyNone

Text Transform Mixins​

MixinDescriptionParameters
@include uppercaseSets text-transform to uppercaseNone
@include lowercaseSets text-transform to lowercaseNone
@include capitalizeSets text-transform to capitalizeNone
@include normal-caseSets text-transform to noneNone

Font Style Mixins​

MixinDescriptionParameters
@include italicSets font-style to italicNone
@include not-italicSets font-style to normalNone

Text Decoration Mixins​

MixinDescriptionParameters
@include underlineSets text-decoration to underlineNone
@include line-throughSets text-decoration to line-throughNone
@include no-underlineSets text-decoration to noneNone

Text Overflow Mixins​

MixinDescriptionParameters
@include truncateTruncates text with ellipsis in one lineNone
@include overflow-labelHandles overflow for labels with min-width supportNone
@include truncate-lines($lines)Truncates text after specified number of lines$lines: Number of lines to show before truncating

Word Break Mixins​

MixinDescriptionParameters
@include break-normalSets normal word breaksNone
@include break-wordsBreaks words to prevent overflowNone
@include break-allBreaks words at any characterNone

Whitespace Mixins​

MixinDescriptionParameters
@include whitespace-normalSets white-space to normalNone
@include whitespace-nowrapSets white-space to nowrapNone
@include whitespace-preSets white-space to preNone
@include whitespace-pre-lineSets white-space to pre-lineNone
@include whitespace-pre-wrapSets white-space to pre-wrapNone

Letter Spacing Mixins​

MixinDescriptionParameters
@include tracking($value)Sets letter spacing$value: Named value or direct value
@include tracking-tighterSets letter spacing to -0.05emNone
@include tracking-tightSets letter spacing to -0.025emNone
@include tracking-normalSets letter spacing to 0None
@include tracking-wideSets letter spacing to 0.025emNone
@include tracking-widerSets letter spacing to 0.05emNone
@include tracking-widestSets letter spacing to 0.1emNone

Responsive Typography Mixin​

MixinDescriptionParameters
@include responsive-typography($breakpoint)Generates responsive typography utilities$breakpoint: Optional breakpoint name

Example SCSS Usage​

Best Practices​

Semantic Typography​

While utility classes are convenient, consider using semantic class names for common text patterns:

Font Size Accessibility​

Remember to consider accessibility when selecting font sizes:

  • Use relative units (rem) for better accessibility (NuvoUI's font sizes are in rem)
  • Avoid font sizes smaller than .text-sm (0.875rem/14px) for body text
  • Maintain sufficient contrast between text and background colors
  • Consider line height and spacing for readability

Responsive Typography​

Use breakpoint-specific typography classes to adjust text properties at different screen sizes:

Performance Considerations​

To keep your CSS bundle size smaller:

  • If you're using many typography utility classes, consider using @apply or SCSS mixins instead
  • Only include the responsive variants you actually need
  • Use appropriate truncation utilities to handle long text values