Typography

Use typography to present your design and content as clearly and efficiently as possible.

'Inter' is the default font for all of our components. If you want to use any other font check how to use another font.

Headings

For headings you can use any of the heading tag h1, h2, h3, h4, h5, h6 elements.

h1. Pebble UI

h2. Pebble UI

h3. Pebble UI

h4. Pebble UI

h5. Pebble UI

h6. Pebble UI

Paragraphs

For your paragraph text size you can use 'p' elements along with any of the size class given below.

'p-sm'

'p-md'

'p-lg'

'p-xl'

'p-xxl'

Small font size paragraph

Medium font size paragraph

Large font size paragraph

Extra large font size paragraph

Extra extra large font size paragraph

Text Align

For aligning position of your any headings or paragraphs, you have to specify alignment class in your code to align the text.

'text-left'

'text-center'

'text-right'

Left aligned, heading-3

Center aligned large size paragraph

Right aligned, heading-4

Font Sizes With and Without Weights

To change the font size and weight of your text, you can simply add any of the class given below.

Font size without weight

'title-xsm'

'title-sm'

'title-md'

'title-lg'

'title-xl'

'title-xxl'

Title extra small

Title small

Title medium

Title large

Title extra large

Title extra extra large

You can use any text element (p, or h1 to h6)

Font size with weight - 300

'title-xsm-wt-3'

'title-sm-wt-3'

'title-md-wt-3'

'title-lg-wt-3'

'title-xl-wt-3'

'title-xxl-wt-3'

Title extra small weight 300

Title small weight 300

Title medium weight 300

Title large weight 300

Title extra large weight 300

Title extra extra large weight 300

You can use any text element (p, or h1 to h6)

Font size with weight - 400

'title-xsm-wt-4'

'title-sm-wt-4'

'title-md-wt-4'

'title-lg-wt-4'

'title-xl-wt-4'

'title-xxl-wt-4'

Title extra small weight 400

Title small weight 400

Title medium weight 400

Title large weight 400

Title extra large weight 400

Title extra extra large weight 400

You can use any text element (p, or h1 to h6)

Font size with weight - 500

'title-xsm-wt-5'

'title-sm-wt-5'

'title-md-wt-5'

'title-lg-wt-5'

'title-xl-wt-5'

'title-xxl-wt-5'

Title extra small weight 500

Title small weight 500

Title medium weight 500

Title large weight 500

Title extra large weight 500

Title extra extra large weight 500

You can use any text element (p, or h1 to h6)

Font size with weight - Bold

'title-xsm-wt-bold'

'title-sm-wt-bold'

'title-md-wt-bold'

'title-lg-wt-bold'

'title-xl-wt-bold'

'title-xxl-wt-bold'

Title extra small weight bold

Title small weight bold

Title medium weight bold

Title large weight bold

Title extra large weight bold

Title extra extra large weight bold

You can use any text element (p, or h1 to h6)

Text Colors

To change the text color, you can simply add any of the class given below.

'text-white'

'text-lighter'

'text-light'

'text-dark'

'text-success'

'text-info'

'text-warning'

'text-error'

White Text

Lighter Text

Light Text

Dark Text

Success Text

Info Text

Warning Text

Error Text

You can use any text element (p, or h1 to h6)