Styleframe Logo
Utilities

Typography

Create typography utilities for font families, sizes, weights, colors, alignment, and text decoration with full type safety.

Overview

Typography utilities help you control text styling including font families, sizes, weights, colors, alignment, decoration, and text overflow behavior. This is one of the most comprehensive utility categories.

Why Use Typography Utilities?

Typography utilities help you:

  • Maintain consistency: Apply the same type styles across your application
  • Integrate with design tokens: Reference your typography scale with ref()
  • Handle text overflow: Control how long text is displayed and truncated
  • Support accessibility: Ensure readable text with proper sizing and contrast

useFontSizeUtility

The useFontSizeUtility() function creates utility classes for setting font sizes.

styleframe.config.ts
import { styleframe } from "styleframe";
import { useFontSize } from "@styleframe/theme";
import { useFontSizeUtility } from "@styleframe/theme";

const s = styleframe();
const { ref } = s;

const { fontSizeXs, fontSizeSm, fontSizeBase, fontSizeLg, fontSizeXl, fontSize2xl, fontSize3xl } = useFontSize(s, {
    xs: '0.75rem',
    sm: '0.875rem',
    base: '1rem',
    lg: '1.125rem',
    xl: '1.25rem',
    '2xl': '1.5rem',
    '3xl': '1.875rem',
} as const);

useFontSizeUtility(s, {
    xs: ref(fontSizeXs),
    sm: ref(fontSizeSm),
    base: ref(fontSizeBase),
    lg: ref(fontSizeLg),
    xl: ref(fontSizeXl),
    '2xl': ref(fontSize2xl),
    '3xl': ref(fontSize3xl),
});

export default s;

useFontFamilyUtility

The useFontFamilyUtility() function creates utility classes for setting font families.

styleframe.config.ts
import { styleframe } from "styleframe";
import { useFontFamilyUtility } from "@styleframe/theme";

const s = styleframe();

useFontFamilyUtility(s, {
    sans: 'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
    serif: 'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',
    mono: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
});

export default s;

useFontWeightUtility

The useFontWeightUtility() function creates utility classes for setting font weights.

styleframe.config.ts
import { styleframe } from "styleframe";
import { useFontWeightUtility } from "@styleframe/theme";

const s = styleframe();

useFontWeightUtility(s, {
    thin: '100',
    extralight: '200',
    light: '300',
    normal: '400',
    medium: '500',
    semibold: '600',
    bold: '700',
    extrabold: '800',
    black: '900',
});

export default s;

useTextColorUtility

The useTextColorUtility() function creates utility classes for setting text colors.

styleframe.config.ts
import { styleframe } from "styleframe";
import { useColor } from "@styleframe/theme";
import { useTextColorUtility } from "@styleframe/theme";

const s = styleframe();
const { ref } = s;

const { colorGray900, colorGray500, colorPrimary } = useColor(s, {
    gray900: '#111827',
    gray500: '#6b7280',
    primary: '#006cff',
} as const);

useTextColorUtility(s, {
    inherit: 'inherit',
    current: 'currentColor',
    transparent: 'transparent',
    default: ref(colorGray900),
    muted: ref(colorGray500),
    primary: ref(colorPrimary),
    white: '#fff',
    black: '#000',
});

export default s;

useTextAlignUtility

Control text alignment.

useTextAlignUtility(s, {
    left: 'left',
    center: 'center',
    right: 'right',
    justify: 'justify',
    start: 'start',
    end: 'end',
});

useLineHeightUtility

Control line height for better readability.

useLineHeightUtility(s, {
    none: '1',
    tight: '1.25',
    snug: '1.375',
    normal: '1.5',
    relaxed: '1.625',
    loose: '2',
});

useLetterSpacingUtility

Control letter spacing (tracking).

useLetterSpacingUtility(s, {
    tighter: '-0.05em',
    tight: '-0.025em',
    normal: '0em',
    wide: '0.025em',
    wider: '0.05em',
    widest: '0.1em',
});

useTextDecorationUtility

Add text decorations like underline and strikethrough.

useTextDecorationLineUtility(s, {
    underline: 'underline',
    overline: 'overline',
    'line-through': 'line-through',
    none: 'none',
});

useLineClampUtility

Truncate text after a specific number of lines with ellipsis.

styleframe.config.ts
import { styleframe } from "styleframe";
import { useLineClampUtility } from "@styleframe/theme";

const s = styleframe();

useLineClampUtility(s, {
    '1': '1',
    '2': '2',
    '3': '3',
    '4': '4',
    '5': '5',
    '6': '6',
    none: 'unset',
});

export default s;

More Typography Utilities

UtilityCSS PropertyDescription
useFontStyleUtilityfont-styleItalic, normal, oblique
useFontStretchUtilityfont-stretchCondensed, expanded
useFontSmoothingUtility-webkit-font-smoothingAnti-aliasing control
useFontVariantNumericUtilityfont-variant-numericOpenType numeric features
useTextTransformUtilitytext-transformUppercase, lowercase, capitalize
useTextOverflowUtilitytext-overflowEllipsis, clip
useTextIndentUtilitytext-indentFirst line indent
useTextUnderlineOffsetUtilitytext-underline-offsetUnderline position
useVerticalAlignUtilityvertical-alignInline element alignment
useWhitespaceUtilitywhite-spaceWrapping and whitespace handling
useWordBreakUtilityword-breakWord breaking rules
useOverflowWrapUtilityoverflow-wrapWord wrapping
useHyphensUtilityhyphensHyphenation
useListStyleUtilitylist-style-typeList markers
useContentUtilitycontentGenerated content

Examples

Text Truncation

styleframe.config.ts
import { styleframe } from "styleframe";
import { useLineClampUtility, useTextOverflowUtility } from "@styleframe/theme";
import { useOverflowUtility, useWhitespaceUtility } from "@styleframe/theme";

const s = styleframe();

// Multi-line truncation
useLineClampUtility(s, {
    '2': '2',
    '3': '3',
});

// Single-line truncation
useTextOverflowUtility(s, { ellipsis: 'ellipsis' });
useOverflowUtility(s, { hidden: 'hidden' });
useWhitespaceUtility(s, { nowrap: 'nowrap' });

export default s;

Usage in HTML:

<!-- Multi-line truncation (3 lines) -->
<p class="_line-clamp:3">
    Long text that will be truncated after three lines with an ellipsis...
</p>

<!-- Single-line truncation -->
<p class="_overflow:hidden _whitespace:nowrap _text-overflow:ellipsis">
    Long text on a single line that will be truncated with an ellipsis...
</p>

Heading Hierarchy

styleframe.config.ts
import { styleframe } from "styleframe";
import { useFontSizeUtility, useFontWeightUtility, useLineHeightUtility, useLetterSpacingUtility } from "@styleframe/theme";

const s = styleframe();

useFontSizeUtility(s, {
    base: '1rem',
    lg: '1.125rem',
    xl: '1.25rem',
    '2xl': '1.5rem',
    '3xl': '1.875rem',
    '4xl': '2.25rem',
});

useFontWeightUtility(s, {
    normal: '400',
    medium: '500',
    semibold: '600',
    bold: '700',
});

useLineHeightUtility(s, {
    tight: '1.25',
    normal: '1.5',
});

useLetterSpacingUtility(s, {
    tight: '-0.025em',
    normal: '0',
});

export default s;

Usage in HTML:

<h1 class="_font-size:4xl _font-weight:bold _line-height:tight _letter-spacing:tight">
    Page Title
</h1>
<h2 class="_font-size:2xl _font-weight:semibold _line-height:tight">
    Section Heading
</h2>
<p class="_font-size:base _font-weight:normal _line-height:normal">
    Body text with comfortable reading line height.
</p>

Best Practices

  • Use a consistent type scale: Define a modular scale for font sizes
  • Pair font size with line height: Larger text needs tighter line height
  • Consider accessibility: Ensure minimum font sizes and sufficient contrast
  • Use relative units: Prefer rem over px for better accessibility
  • Limit font weights: Most designs need only 3-4 weights (normal, medium, semibold, bold)
  • Test line clamping: Truncation with ellipsis needs testing with various content lengths

FAQ

Transitions & Animation

Create transition and animation utilities for smooth state changes and motion effects with full type safety.