CSS

Reference

Defining a Font Scale

Attempt One - Themes

One way to define a font scale is to declare it in a theme file.

src/theme.styles.ts
export const text = {
    xs: "0.75rem",
    sm: "0.875rem",
    md: "1rem",
    lg: "1.125rem",
    xl: "1.25rem",
    "2xl": "1.5rem",
    "3xl": "1.875rem",
    "4xl": "2.25rem",
    "5xl": "3rem",
    "6xl": "3.75rem",
    "7xl": "4.5rem",
    "8xl": "6rem",
    "9xl": "8rem",
}
src/HomePage.tsx
import { text } from "./theme.styles"

function HomePage() {
  return (
    <>
      <h1 css={{ fontSize: text['3xl'] }}>My awesome homepage</h1>
      <p css={{ fontSize: text.md }}>Hi! My name is Jeffany and I like CSS.</p>
    </>
  );
}

Hovever, if you want your font scale to define a line-height as well, you now either have to define a separate line-height scale, or switch to spreading a set of styles onto the style objects.

Awkward Option 1: Separate Line-Height Scale

src/theme.styles.ts
export const text = {
    xs: "0.75rem",
    sm: "0.875rem",
    md: "1rem",
    lg: "1.125rem",
    xl: "1.25rem",
    "2xl": "1.5rem",
    "3xl": "1.875rem",
    "4xl": "2.25rem",
    "5xl": "3rem",
    "6xl": "3.75rem",
    "7xl": "4.5rem",
    "8xl": "6rem",
    "9xl": "8rem",
}

export const lineHeight = {
    xs: "1rem",
    sm: "1.25rem",
    md: "1.5rem",
    lg: "1.75rem",
    xl: "1.75rem",
    "2xl": "2rem",
    "3xl": "2.25rem",
    "4xl": "2.5rem",
    "5xl": "1",
    "6xl": "1",
    "7xl": "1",
    "8xl": "1",
    "9xl": "1",
}
src/HomePage.tsx
import { text, lineHeight } from "./theme.styles"

function HomePage() {
  return (
    <>
      <h1 css={{ fontSize: text['3xl'], lineHeight: lineHeight['3xl'] }}>My awesome homepage</h1>
      <p css={{ fontSize: text.md, lineHeight: lineHeight.md }}>Hi! My name is Jeffany and I like CSS.</p>
    </>
  );
}

Awkward Option 2: Style Spreading

src/theme.styles.ts
export const textStyles = {
    "xs": {
        fontSize: "0.75rem",
        lineHeight: "1rem",
    },
    "sm": {
        fontSize: "0.875rem",
        lineHeight: "1.25rem",
    },
    "md": {
        fontSize: "1rem",
        lineHeight: "1.5rem",
    },
    "lg": {
        fontSize: "1.125rem",
        lineHeight: "1.75rem",
    },
    "xl": {
        fontSize: "1.25rem",
        lineHeight: "1.75rem",
    },
    "2xl": {
        fontSize: "1.5rem",
        lineHeight: "2rem",
    },
    "3xl": {
        fontSize: "1.875rem",
        lineHeight: "2.25rem",
    },
    "4xl": {
        fontSize: "2.25rem",
        lineHeight: "2.5rem",
    },
    "5xl": {
        fontSize: "3rem",
        lineHeight: "1",
    },
    "6xl": {
        fontSize: "3.75rem",
        lineHeight: "1",
    },
    "7xl": {
        fontSize: "4.5rem",
        lineHeight: "1",
    },
    "8xl": {
        fontSize: "6rem",
        lineHeight: "1",
    },
}
src/HomePage.tsx
import { textStyles } from "./theme.styles"

function HomePage() {
  return (
    <>
      <h1 css={{ ...textStyles['3xl'] }}>My awesome homepage</h1>
      <p css={{ ...textStyles.md }}>Hi! My name is Jeffany and I like CSS.</p>
    </>
  );
}

Both of these are fine, but you may be able to write cleaner code using utils.

Attempt Two - Utils

hypergood.config.ts
export const textStyles = {
    "xs": {
        fontSize: "0.75rem",
        lineHeight: "1rem",
    },
    "sm": {
        fontSize: "0.875rem",
        lineHeight: "1.25rem",
    },
    "md": {
        fontSize: "1rem",
        lineHeight: "1.5rem",
    },
    "lg": {
        fontSize: "1.125rem",
        lineHeight: "1.75rem",
    },
    "xl": {
        fontSize: "1.25rem",
        lineHeight: "1.75rem",
    },
    "2xl": {
        fontSize: "1.5rem",
        lineHeight: "2rem",
    },
    "3xl": {
        fontSize: "1.875rem",
        lineHeight: "2.25rem",
    },
    "4xl": {
        fontSize: "2.25rem",
        lineHeight: "2.5rem",
    },
    "5xl": {
        fontSize: "3rem",
        lineHeight: "1",
    },
    "6xl": {
        fontSize: "3.75rem",
        lineHeight: "1",
    },
    "7xl": {
        fontSize: "4.5rem",
        lineHeight: "1",
    },
    "8xl": {
        fontSize: "6rem",
        lineHeight: "1",
    },
}

export const styleConfig = {
    utils: {
        fontScale: (value: keyof typeof textStyles) => textStyles[value],
    }
}
src/HomePage.tsx
function HomePage() {
  return (
    <>
      <h1 css={{ fontScale: "3xl" }}>My awesome homepage</h1>
      <p css={{ fontScale: "md" }}>Hi! My name is Jeffany and I like CSS.</p>
    </>
  );
}

All of the above options are fine! It's up to you to decide which one you like best.

Previous
Utils
Next
Media