---
number: "02"
---

<ChapterHeader number="02" title="Typography" />

<DescriptionSection
  action={
    <DownloadButton href="/fonts.zip">Download fonts</DownloadButton>
  }
>
  Typography does a lot of the heavy lifting here. It sets the pace, holds the
  hierarchy, and gives the brand its voice — clean, confident, and unmistakably
  modern.
</DescriptionSection>

<ContentSection>
  <SectionTitle
    title="Aspekta"
    description="Aspekta is the primary typeface. It moves easily between big statements and small utility copy, which makes it a practical choice for a brand that lives across websites, product surfaces, and founder-facing materials."
  />
  <ShowcaseContainer className="aspect-280/150">
    <span className="text-d1 text-brand-black">Aspekta</span>
  </ShowcaseContainer>
</ContentSection>

<ContentSection>
  <SectionTitle
    title="Weights & styles"
    description="A broad weight range gives the system room to speak in different registers. Light weights bring restraint. Heavier cuts add urgency, emphasis, and presence when it matters."
  />
  <ShowcaseContainer className="h-auto min-h-150 flex-col gap-0 py-20! xl:h-343">
    <div className="text-brand-black flex w-full max-w-175 flex-wrap justify-center gap-10 text-center text-[56px] leading-none tracking-[-0.03em] xl:gap-20 xl:px-8 xl:text-[100px]">
      <span className="font-[350]">Aspekta</span>
      <div className="flex flex-col gap-4 xl:gap-8">
        {[300, 350, 400, 450, 500, 600, 700].map((weight) => (
          <span key={weight} style={{ fontWeight: weight }}>
            {weight}
          </span>
        ))}
      </div>
    </div>
  </ShowcaseContainer>
</ContentSection>

<ContentSection>
  <TypographyShowcase
    title="Display"
    desktop={
      <>
        <TypographyRow
          name="Display 01"
          spec="140px / 100%"
          token="Global/Display/D1"
          sampleText="Design"
          sampleClassName="text-d1-d"
        />
        <TypographyRow
          name="Display 02"
          spec="120px / 100%"
          token="Global/Display/D2"
          sampleText="Trust"
          sampleClassName="text-d2"
        />
      </>
    }
    mobile={
      <>
        <TypographyRow
          name="Display 01"
          spec="48px / 100%"
          token="Global/Display/D1"
          sampleText="Design"
          sampleClassName="text-d1-m"
        />
        <TypographyRow
          name="Display 02"
          spec="120px / 100%"
          token="Global/Display/D2"
          sampleText="Trust"
          sampleClassName="text-d2"
        />
      </>
    }
  />
</ContentSection>

<ContentSection>
  <TypographyShowcase
    title="Headings"
    desktop={
      <>
        <TypographyRow
          name="Heading 01"
          spec="96px / 100%"
          token="Global/Header/H1"
          sampleText="Design"
          sampleClassName="text-h1-d"
        />
        <TypographyRow
          name="Heading 02"
          spec="80px / 100%"
          token="Global/Header/H2"
          sampleText="Trust"
          sampleClassName="text-h2-d"
        />
        <TypographyRow
          name="Heading 03"
          spec="64px / 100%"
          token="Global/Header/H3"
          sampleText="Design"
          sampleClassName="text-h3-d"
        />
        <TypographyRow
          name="Heading 04"
          spec="56px / 100%"
          token="Global/Header/H4"
          sampleText="Trust"
          sampleClassName="text-h4-d"
        />
        <TypographyRow
          name="Heading 05"
          spec="48px / 100%"
          token="Global/Header/H5"
          sampleText="Design"
          sampleClassName="text-h5-d"
        />
        <TypographyRow
          name="Heading 06"
          spec="40px / 110%"
          token="Global/Header/H6"
          sampleText="Trust"
          sampleClassName="text-h6-d"
        />
      </>
    }
    mobile={
      <>
        <TypographyRow
          name="Heading 01"
          spec="48px / 100%"
          token="Global/Header/H1"
          sampleText="Design"
          sampleClassName="text-h1-m"
        />
        <TypographyRow
          name="Heading 02"
          spec="48px / 100%"
          token="Global/Header/H2"
          sampleText="Trust"
          sampleClassName="text-h2-m"
        />
        <TypographyRow
          name="Heading 03"
          spec="48px / 100%"
          token="Global/Header/H3"
          sampleText="Design"
          sampleClassName="text-h3-m"
        />
        <TypographyRow
          name="Heading 04"
          spec="40px / 100%"
          token="Global/Header/H4"
          sampleText="Trust"
          sampleClassName="text-h4-m"
        />
        <TypographyRow
          name="Heading 05"
          spec="32px / 100%"
          token="Global/Header/H5"
          sampleText="Design"
          sampleClassName="text-h5-m"
        />
        <TypographyRow
          name="Heading 06"
          spec="24px / 110%"
          token="Global/Header/H6"
          sampleText="Trust"
          sampleClassName="text-h6-m"
        />
      </>
    }
  />
</ContentSection>

<ContentSection>
  <TypographyShowcase
    title="Subtitles"
    desktop={
      <>
        <TypographyRow
          name="Subtitle 01"
          spec="32px / 130%"
          token="Global/Subtitle/01"
          sampleText="Supporting text for headings intros"
          sampleClassName="text-sub1"
        />
        <TypographyRow
          name="Subtitle 02"
          spec="24px / 130%"
          token="Global/Subtitle/02"
          sampleText="Supporting text for headings intros"
          sampleClassName="text-sub2"
        />
        <TypographyRow
          name="Subtitle 03"
          spec="20px / 130%"
          token="Global/Subtitle/03"
          sampleText="Supporting text for headings intros"
          sampleClassName="text-sub3"
        />
        <TypographyRow
          name="Subtitle 04"
          spec="16px / 130%"
          token="Global/Subtitle/04"
          sampleText="Supporting text for headings intros"
          sampleClassName="text-sub4"
        />
      </>
    }
    mobile={
      <>
        <TypographyRow
          name="Subtitle 01"
          spec="32px / 130%"
          token="Global/Subtitle/01"
          sampleText="Supporting text for headings intros"
          sampleClassName="text-sub1"
        />
        <TypographyRow
          name="Subtitle 02"
          spec="24px / 130%"
          token="Global/Subtitle/02"
          sampleText="Supporting text for headings intros"
          sampleClassName="text-sub2"
        />
        <TypographyRow
          name="Subtitle 03"
          spec="20px / 130%"
          token="Global/Subtitle/03"
          sampleText="Supporting text for headings intros"
          sampleClassName="text-sub3"
        />
        <TypographyRow
          name="Subtitle 04"
          spec="16px / 130%"
          token="Global/Subtitle/04"
          sampleText="Supporting text for headings intros"
          sampleClassName="text-sub4"
        />
      </>
    }
  />
</ContentSection>

<ContentSection>
  <TypographyShowcase
    title="Button Typography"
    desktop={
      <>
        <TypographyRow
          name="Button XLarge"
          spec="40px / 130%"
          token="Global/Button/XL"
          sampleText="Say hello →"
          sampleClassName="text-btn-xl"
        />
        <TypographyRow
          name="Button Regular"
          spec="20px / 130%"
          token="Global/Button/Regular"
          sampleText="View Case Study →"
          sampleClassName="text-btn"
        />
        <TypographyRow
          name="Button Small"
          spec="16px / 130%"
          token="Global/Button/Small"
          sampleText="View Case Study"
          sampleClassName="text-btn-sm"
        />
        <TypographyRow
          name="Button XSmall"
          spec="14px / 130%"
          token="Global/Button/XSmall"
          sampleText="Submit"
          sampleClassName="text-btn-xs"
        />
      </>
    }
    mobile={
      <>
        <TypographyRow
          name="Button XLarge"
          spec="40px / 130%"
          token="Global/Button/XL"
          sampleText="Say hello →"
          sampleClassName="text-btn-xl"
        />
        <TypographyRow
          name="Button Regular"
          spec="20px / 130%"
          token="Global/Button/Regular"
          sampleText="View Case Study →"
          sampleClassName="text-btn"
        />
        <TypographyRow
          name="Button Small"
          spec="16px / 130%"
          token="Global/Button/Small"
          sampleText="View Case Study"
          sampleClassName="text-btn-sm"
        />
        <TypographyRow
          name="Button XSmall"
          spec="14px / 130%"
          token="Global/Button/XSmall"
          sampleText="Submit"
          sampleClassName="text-btn-xs"
        />
      </>
    }
  />
</ContentSection>

<ContentSection>
  <TypographyShowcase
    title="Body"
    desktop={
      <>
        <TypographyRow
          name="Body 01"
          spec="20px / 140%"
          token="Global/Body/01"
          sampleText="Design builds trust. Trust compounds into ownership."
          sampleClassName="text-b1"
        />
        <TypographyRow
          name="Body 02"
          spec="18px / 140%"
          token="Global/Body/02"
          sampleText="Design builds trust. Trust compounds into ownership."
          sampleClassName="text-b2"
        />
        <TypographyRow
          name="Body 03"
          spec="16px / 140%"
          token="Global/Body/03"
          sampleText="Design builds trust. Trust compounds into ownership."
          sampleClassName="text-b3"
        />
        <TypographyRow
          name="Body 04"
          spec="14px / 140%"
          token="Global/Body/04"
          sampleText="Design builds trust. Trust compounds into ownership."
          sampleClassName="text-b4"
        />
      </>
    }
    mobile={
      <>
        <TypographyRow
          name="Body 01"
          spec="20px / 140%"
          token="Global/Body/01"
          sampleText="Design builds trust. Trust compounds into ownership."
          sampleClassName="text-b1"
        />
        <TypographyRow
          name="Body 02"
          spec="18px / 140%"
          token="Global/Body/02"
          sampleText="Design builds trust. Trust compounds into ownership."
          sampleClassName="text-b2"
        />
        <TypographyRow
          name="Body 03"
          spec="16px / 140%"
          token="Global/Body/03"
          sampleText="Design builds trust. Trust compounds into ownership."
          sampleClassName="text-b3"
        />
        <TypographyRow
          name="Body 04"
          spec="14px / 140%"
          token="Global/Body/04"
          sampleText="Design builds trust. Trust compounds into ownership."
          sampleClassName="text-b4"
        />
      </>
    }
  />
</ContentSection>

<ContentSection>
  <TypographyShowcase
    title="Article Typography"
    desktop={
      <>
        <TypographyRow
          name="Article 01"
          spec="20px / 160%"
          token="Global/Body/Arti01"
          sampleText="Long-form text with increased line height for readability."
          sampleClassName="text-article1"
        />
        <TypographyRow
          name="Article 02"
          spec="18px / 160%"
          token="Global/Body/Arti02"
          sampleText="Long-form text with increased line height for readability."
          sampleClassName="text-article2"
        />
        <TypographyRow
          name="Article 03"
          spec="16px / 160%"
          token="Global/Body/Arti03"
          sampleText="Long-form text with increased line height for readability."
          sampleClassName="text-article3"
        />
      </>
    }
    mobile={
      <>
        <TypographyRow
          name="Article 01"
          spec="20px / 160%"
          token="Global/Body/Arti01"
          sampleText="Long-form text with increased line height for readability."
          sampleClassName="text-article1"
        />
        <TypographyRow
          name="Article 02"
          spec="18px / 160%"
          token="Global/Body/Arti02"
          sampleText="Long-form text with increased line height for readability."
          sampleClassName="text-article2"
        />
        <TypographyRow
          name="Article 03"
          spec="16px / 160%"
          token="Global/Body/Arti03"
          sampleText="Long-form text with increased line height for readability."
          sampleClassName="text-article3"
        />
      </>
    }
  />
</ContentSection>

<ContentSection>
  <TypographyShowcase
    title="Labels"
    desktop={
      <>
        <TypographyRow
          name="Label 01"
          spec="20px / 100%"
          token="Global/Label/01"
          sampleText="Label text"
          sampleClassName="text-label1"
        />
        <TypographyRow
          name="Label 02"
          spec="16px / 100%"
          token="Global/Label/02"
          sampleText="Label text"
          sampleClassName="text-label2"
        />
        <TypographyRow
          name="Label 03"
          spec="14px / 100%"
          token="Global/Label/03"
          sampleText="LABEL TEXT — REGULAR · 500 · 350"
          sampleClassName="text-label3-upper"
        />
        <TypographyRow
          name="Label 04"
          spec="12px / 100%"
          token="Global/Label/04"
          sampleText="LABEL TEXT — 500 · 350"
          sampleClassName="text-label4-upper"
        />
        <TypographyRow
          name="Label 05"
          spec="8px / 100%"
          token="Global/Label/05"
          sampleText="MICRO LABEL"
          sampleClassName="text-label5-upper"
        />
      </>
    }
    mobile={
      <>
        <TypographyRow
          name="Label 01"
          spec="20px / 100%"
          token="Global/Label/01"
          sampleText="Label text"
          sampleClassName="text-label1"
        />
        <TypographyRow
          name="Label 02"
          spec="16px / 100%"
          token="Global/Label/02"
          sampleText="Label text"
          sampleClassName="text-label2"
        />
        <TypographyRow
          name="Label 03"
          spec="14px / 100%"
          token="Global/Label/03"
          sampleText="LABEL TEXT — REGULAR · 500 · 350"
          sampleClassName="text-label3-upper"
        />
        <TypographyRow
          name="Label 04"
          spec="12px / 100%"
          token="Global/Label/04"
          sampleText="LABEL TEXT — 500 · 350"
          sampleClassName="text-label4-upper"
        />
        <TypographyRow
          name="Label 05"
          spec="8px / 100%"
          token="Global/Label/05"
          sampleText="MICRO LABEL"
          sampleClassName="text-label5-upper"
        />
      </>
    }
  />
</ContentSection>

---

Previous: [Logo & Mark](https://brand.zypsy.com/docs/logo-and-mark)  
Next: [Colors](https://brand.zypsy.com/docs/colors)