Typography

Typography includes text, headings, and captions.

Sizes

To change font size, use one of the predefined class names such as text-moon-XX. Those class names include a combination of font-size, line-height, and letter-spacing properties where applicable.

Size 9

Size 10

Size 12

Size 14

Size 16

Size 18

Size 20

Size 24

Size 32

Size 40

Size 48

Size 56

Size 64

Size 72

const Sizes = () => (
  <div className="flex flex-col gap-2 w-full">
    <p className="text-moon-9">Size 9</p>
    <p className="text-moon-10">Size 10</p>
    <p className="text-moon-12">Size 12</p>
    <p className="text-moon-14">Size 14</p>
    <p className="text-moon-16">Size 16</p>
    <p className="text-moon-18">Size 18</p>
    <p className="text-moon-20">Size 20</p>
    <p className="text-moon-24">Size 24</p>
    <p className="text-moon-32">Size 32</p>
    <p className="text-moon-40">Size 40</p>
    <p className="text-moon-48">Size 48</p>
    <p className="text-moon-56">Size 56</p>
    <p className="text-moon-64">Size 64</p>
    <p className="text-moon-72">Size 72</p>
  </div>
);

export default Sizes;

Captions

By default, there are just two caption sizes with different letter-spacing, and are defined with text-moon-XX-caption class names. You also need to make them uppercase.

Size 9Size 10

const Captions = () => (
  <div className="flex flex-col gap-2 w-full">
    <span className="text-moon-9-caption uppercase">Size 9</span>
    <span className="text-moon-10-caption uppercase">Size 10</span>
  </div>
);

export default Captions;

Customization

You can use any semantic HTML-tags. You may also need to change text color or font-weight.

Heading

Color

Font-weightText-transformFont-size

const Customization = () => (
  <>
    <h5>Heading</h5>
    <p className="text-piccolo">Color</p>
    <span className="font-medium">Font-weight</span>
    <span className="underline">Text-transform</span>
    <span className="text-moon-24">Font-size</span>
  </>
);

export default Customization;