Skip to Content
Font Weight

Font Weight

Use fontWeight prop to control the font-weight of an element.

Name

Styles

400
500
600
700
900
inherit

#

Documentation

#

Usage

400

The quick brown fox jumps over the lazy dog.

500

The quick brown fox jumps over the lazy dog.

600

The quick brown fox jumps over the lazy dog.

700

The quick brown fox jumps over the lazy dog.

import type { ComponentPropsWithoutRef } from "react";
 
import { Group, Text } from "@optiaxiom/react";
 
export function App() {
  return (
    <Group flexDirection="column" gap="16">
      <DemoItem fontWeight="400">
        The quick brown fox jumps over the lazy dog.
      </DemoItem>
      <DemoItem fontWeight="500">
        The quick brown fox jumps over the lazy dog.
      </DemoItem>
      <DemoItem fontWeight="600">
        The quick brown fox jumps over the lazy dog.
      </DemoItem>
      <DemoItem fontWeight="700">
        The quick brown fox jumps over the lazy dog.
      </DemoItem>
    </Group>
  );
}
 
function DemoItem({
  children,
  ...props
}: ComponentPropsWithoutRef<typeof Text>) {
  return (
    <div>
      <Text color="fg.tertiary" fontFamily="mono" fontWeight="600">
        {props.fontWeight}
      </Text>
      <Text {...props}>{children}</Text>
    </div>
  );
}

#

Related

A

a

Typography

The type scale, and which component renders each style. Start here before reaching for font props.

Last updated on
Font SizeGap