Typography

Utilities for Typography.

Text Design

The utility text-[letters] provides a simple way to set various text styles and properties, such as font size, line height, font weight, letter spacing, etc...

Customizing

By default, this utility sets font size and line height for different text sizes.

But you can customize it by adjusting values in the Mojo's configuration object to set other styles like font weight (fontWeight) and letter spacing (letterSpacing).

mojo({
    base: {
        -- textDesign ** : {
            sm: {
                fontSize: "0.875rem",
                lineHeight: "1.5",
            },
            md: {
                fontSize: "1rem",
                lineHeight: "1.5",
            },
            lg: {
                fontSize: "1.125rem",
                lineHeight: "1.5",
            },
            xl: {
                fontSize: "1.5rem",
                lineHeight: "1.5",
            },
            xxl: {
                fontSize: "2rem",
                lineHeight: "1.5",
            },
            -- big ** : {
                fontSize: "4rem",
                lineHeight: "1.6",
                letterSpcaing: "4px"
            },
        },
    },
})

You can access your custom utilities for text design such as big by using the syntax text-big.

Font Size

Using text-[numbers], you can control the font size of an element.

The font-size utility enables you to easily adjust the size of text in your design by using a numerical value that gets converted into a multiple of 0.01rem (can be changed in config → units), allowing you to specify precise sizes like text-100 and even decimal values like text-114.4.

Font Weight

Using text-w-[*], you can control the font weight of text.

A list of available utilites for font-weight:

Font Style

Using text-s-[*], you can control the style of text.

Letter Spacing

Using text-ls-[*], you can control the letter spacing of an element.

Line Height

Using text-lh-[*], you can control the line height of an element.

Text Align

Using text-a-[*], you can control the alignment of text.

Text Decoration

Using text-d-[*], you can control the decoration of text.

Text Transform

Using text-t-[*], you can control the transformation of text.

White Space

Using text-ws-[*], you can control the element's white-space property.

Word Break

Using text-wb-[*], you can control the word breaks in the element.

Vertical Align

Using v-align-[*], you can control the vertical alignment of an inline box.

List Style Type

Using list-style-[*], you can control the type of list-item marker in a list.

List Style Position

Using list-style-p-[*], you can control the position of the list-item markers.