Styleframe Logo
Composables

Headings Element

Style heading elements h1 through h6 with configurable font family, weight, line height, color, and per-level sizes using the useHeadingElement composable.

Overview

The useHeadingElement composable styles all heading levels (h1 through h6) with shared typography properties and individual font sizes per level. It creates CSS variables for the font family, weight, line height, color, and each heading level's size.

useHeadingElement

function useHeadingElement(
    s: Styleframe,
    options?: WithThemes<HeadingElementConfig>
): HeadingElementResult
styleframe.config.ts
import { styleframe } from 'styleframe';
import { useHeadingElement } from '@styleframe/theme';

const s = styleframe();

const {
    headingColor,
    headingFontFamily,
    headingFontWeight,
    headingLineHeight,
    headingH1FontSize,
    headingH2FontSize,
    headingH3FontSize,
    headingH4FontSize,
    headingH5FontSize,
    headingH6FontSize,
} = useHeadingElement(s);

export default s;

Default Values

Shared Properties

OptionDefaultVariableExport
color"inherit"--heading--colorheadingColor
fontFamily"inherit"--heading--font-familyheadingFontFamily
fontWeight"@font-weight.bold"--heading--font-weightheadingFontWeight
lineHeight"@line-height.tight"--heading--line-heightheadingLineHeight

Heading Sizes

LevelDefaultVariableExport
h1"@font-size.4xl"--heading--h1--font-sizeheadingH1FontSize
h2"@font-size.3xl"--heading--h2--font-sizeheadingH2FontSize
h3"@font-size.2xl"--heading--h3--font-sizeheadingH3FontSize
h4"@font-size.xl"--heading--h4--font-sizeheadingH4FontSize
h5"@font-size.lg"--heading--h5--font-sizeheadingH5FontSize
h6"@font-size.md"--heading--h6--font-sizeheadingH6FontSize

The default size configuration is also available as a standalone export: defaultHeadingSizeConfig.

Custom Values

styleframe.config.ts
import { styleframe } from 'styleframe';
import { useHeadingElement } from '@styleframe/theme';

const s = styleframe();

const { headingH1FontSize, headingH2FontSize } = useHeadingElement(s, {
    fontFamily: '"Playfair Display", serif',
    fontWeight: '700',
    lineHeight: '1.3',
    sizes: {
        h1: '3rem',
        h2: '2.25rem',
    },
});

export default s;

The sizes option is partially applied — only the levels you specify are overridden. Unspecified levels keep their defaults from defaultHeadingSizeConfig.

Best Practices

  • Reference font-size tokens: Use @font-size.4xl through @font-size.md to keep heading sizes consistent with your type scale.
  • Use a tight line height: The default @line-height.tight (1.2) keeps headings compact. Increase it for long, multi-line headings.
  • Override only the sizes you need: The sizes option merges with defaults, so you only need to specify the levels you want to change.
  • Inherit color by default: Using "inherit" for color lets headings match their parent context without additional overrides.

Focus

Apply consistent focus-visible outline styles across all elements with configurable color, width, style, and offset using the useFocusState composable.

Horizontal Rule

Style horizontal rule elements with configurable border color, width, style, and margin using the useHrElement composable.