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.
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.
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 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 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 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 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 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.
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)