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

<!-- h1 heading -->
<h1>h1. Pebble UI</h1>

<!-- h2 heading -->
<h2>h2. Pebble UI</h2>

<!-- h3 heading -->
<h3>h3. Pebble UI</h3>

<!-- h4 heading -->
<h4>h4. Pebble UI</h4>

<!-- h5 heading -->
<h5>h5. Pebble UI</h5>

<!-- h6 heading -->
<h6>h6. Pebble UI</h6>

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

<!-- paragraph small size font -->
<p class="p-sm">Small font size paragraph </p>

<!-- paragraph medium size font -->
<p class="p-md">Medium font size paragraph </p>

<!-- paragraph large size font -->
<p class="p-lg">Large font size paragraph </p>

<!-- paragraph extra large size font -->
<p class="p-xl">Extra large font size paragraph </p>

<!-- paragraph extra extra large size font -->
<p class="p-xxl">Extra extra large font size paragraph </p>

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

<!-- Left aligned, h3-heading -->
<h3 class="text-left">Left aligned, h3-heading</h3>

<!-- Center aligned large size paragraph -->
<p class="p-lg text-center">Center aligned large size paragraph</p>

<!-- Right aligned, h4-heading -->
<h4 class="text-right">Right aligned, h4-heading</h4>

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)

<!-- title-lg -->
<h2 class="title-xsm">Title extra small</h2>

<!-- title-sm -->
<h2 class="title-sm">Title small</h2>

<!-- title-md -->
<h2 class="title-md">Title medium</h2>

<!-- title-lg -->
<h2 class="title-lg">Title large</h2>

<!-- title-xl -->
<h2 class="title-xl">Title extra large</h2>

<!-- title-xxl -->
<h2 class="title-xxl">Title extra extra large</h2>

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)

<!-- title-lg-wt-3 -->
<h2 class="title-xsm-wt-3">Title extra small weight 300</h2>

<!-- title-sm-wt-3 -->
<h2 class="title-sm-wt-3">Title small weight 300</h2>

<!-- title-md-wt-3 -->
<h2 class="title-md-wt-3">Title medium weight 300</h2>

<!-- title-lg-wt-3 -->
<h2 class="title-lg-wt-3">Title large weight 300</h2>

<!-- title-xl-wt-3 -->
<h2 class="title-xl-wt-3">Title extra large weight 300</h2>

<!-- title-xxl-wt-3 -->
<h2 class="title-xxl-wt-3">Title extra extra large weight 300</h2>

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)

<!-- title-lg-wt-4 -->
<h2 class="title-xsm-wt-4">Title extra small weight 400</h2>

<!-- title-sm-wt-4 -->
<h2 class="title-sm-wt-4">Title small weight 400</h2>

<!-- title-md-wt-4 -->
<h2 class="title-md-wt-4">Title medium weight 400</h2>

<!-- title-lg-wt-4 -->
<h2 class="title-lg-wt-4">Title large weight 400</h2>

<!-- title-xl-wt-4 -->
<h2 class="title-xl-wt-4">Title extra large weight 400</h2>

<!-- title-xxl-wt-4 -->
<h2 class="title-xxl-wt-4">Title extra extra large weight 400</h2>

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)

<!-- title-lg-wt-5 -->
<h2 class="title-xsm-wt-5">Title extra small weight 500</h2>

<!-- title-sm-wt-5 -->
<h2 class="title-sm-wt-5">Title small weight 500</h2>

<!-- title-md-wt-5 -->
<h2 class="title-md-wt-5">Title medium weight 500</h2>

<!-- title-lg-wt-5 -->
<h2 class="title-lg-wt-5">Title large weight 500</h2>

<!-- title-xl-wt-5 -->
<h2 class="title-xl-wt-5">Title extra large weight 500</h2>

<!-- title-xxl-wt-5 -->
<h2 class="title-xxl-wt-5">Title extra extra large weight 500</h2>

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)

<!-- title-lg-wt-bold -->
<h2 class="title-xsm-wt-bold">Title extra small weight bold</h2>

<!-- title-sm-wt-bold -->
<h2 class="title-sm-wt-bold">Title small weight bold</h2>

<!-- title-md-wt-bold -->
<h2 class="title-md-wt-bold">Title medium weight bold</h2>

<!-- title-lg-wt-bold -->
<h2 class="title-lg-wt-bold">Title large weight bold</h2>

<!-- title-xl-wt-bold -->
<h2 class="title-xl-wt-bold">Title extra large weight bold</h2>

<!-- title-xxl-wt-bold -->
<h2 class="title-xxl-wt-bold">Title extra extra large weight bold</h2>

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)

<!-- text-white -->
<h2 class="text-white">White Text</h2>

<!-- text-lighter -->
<h2 class="text-lighter">Lighter Text</h2>

<!-- text-light -->
<h2 class="text-light">Light Text</h2>

<!-- text-dark -->
<h2 class="text-dark">Dark Text</h2>

<!-- text-success -->
<h2 class="text-success">Success Text</h2>

<!-- text-info -->
<h2 class="text-info">Info Text</h2>

<!-- text-warning -->
<h2 class="text-warning">Warning Text</h2>

<!-- text-error -->
<h2 class="text-error">Error Text</h2>