Typography

Use typography to present your copy as clearly as possible to the user taking into account accessibility.

Component

Basic Usage

This is an H1 heading

This is an H2 heading

This is an H3 heading

This is an H4 heading

This is an H5 heading

This is an H6 heading

This is a subtitle1

This is a subtitle2

This is an body1 paragraph

This is an body2 paragraph

This is a caption paragraph

This is an overline paragraph

---
import { Typography } from "@gemini-ui-astro/components";
---

<Typography variant="h1">This is an H1 heading</Typography>
<Typography variant="h2">This is an H2 heading</Typography>
<Typography variant="h3">This is an H3 heading</Typography>
<Typography variant="h4">This is an H4 heading</Typography>
<Typography variant="h5">This is an H5 heading</Typography>
<Typography variant="h6">This is an H6 heading</Typography>
<Typography variant="subtitle1">This is a subtitle1</Typography>
<Typography variant="subtitle2">This is a subtitle2</Typography>
<Typography variant="body1">This is an body1 paragraph</Typography>
<Typography variant="body2">This is an body2 paragraph</Typography>
<Typography variant="caption">This is a caption paragraph</Typography>
<Typography variant="overline">This is an overline paragraph</Typography>

Changing the semantic element

It is important to maintain semantics in your HTML, search engines rank sites based on an ordered heirachy. However, there are times when it may not appear visually appealing to do this.

You may need to take the styling of one element and use it on another. You can do this by using the as prop.

This is an H2 heading with an H3 override

---
import { Typography } from "@gemini-ui-astro/components";
---

<Typography variant="h3" as="h2">
  This is an H2 heading with an H3 override
</Typography>

This creates an h2 element with the styles of an h3 element.

API

The Typography component has the following props.

Name	Type	Default	Description
variant	”h1” | “h2” | “h3” | “h4” | “h5” | “h6” | “subtitle1” | “subtitle2” | “body1” | “body2” | “caption” | “overline”;	default	Defines which element is used
as	”h1” | “h2” | “h3” | “h4” | “h5” | “h6” | “p” | “span”	-	Defines which elements styling is used as an override
class	string	-	Override or extend the styles applied to the component.