Font Weight
| Tailwind class | Example | Weight | Name | Usage |
|---|---|---|---|---|
| font-regular | The quick brown fox jumps over the lazy dog. | 400 | Regular | Default |
| font-medium | The quick brown fox jumps over the lazy dog. | 500 | Medium | Special links |
| font-semibold | The quick brown fox jumps over the lazy dog. | 600 | Semibold | Special Headings and buttons |
| font-bold | The quick brown fox jumps over the lazy dog. | 800 | Bold (Extrabold in Figma) | Body bold |
| font-extrabold | The quick brown fox jumps over the lazy dog. | 800 | Extrabold | Buttons, Eyebrows |
| font-black | The quick brown fox jumps over the lazy dog. | 900 | Black | Headings |
Sizes
| font size | line height | ||
|---|---|---|---|
| text-xs | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc congue nisi vitae suscipit. Felis bibendum ut tristique et egestas. Rum sociis natoque penatibus et magnis. Faucibus a pellentesque sit amet porttitor. | 12px | 16px 133.333% 1rem |
| text-sm | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc congue nisi vitae suscipit. Felis bibendum ut tristique et egestas. Rum sociis natoque penatibus et magnis. Faucibus a pellentesque sit amet porttitor. | 14px | 20px 142.857% 1.25rem |
| text-base | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc congue nisi vitae suscipit. Felis bibendum ut tristique et egestas. Rum sociis natoque penatibus et magnis. Faucibus a pellentesque sit amet porttitor. | 16px | 24px 150% 1.5rem |
| text-lg | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc congue nisi vitae suscipit. Felis bibendum ut tristique et egestas. Rum sociis natoque penatibus et magnis. Faucibus a pellentesque sit amet porttitor. | 18px | 28px 155.556% 1.75rem |
Headings
| Mobile | Desktop | ||
|---|---|---|---|
| .h1 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod. | 36/45 | 60/75 |
| .h2 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do. | 30/37.5 | 48/60 |
| .h3 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc. | 24/30 | 30/37.5 |
| .h4 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. | 20/25 | 24/30 |
| .h5 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc congue nisi vitae suscipit. Felis bibendum ut.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc congue nisi vitae suscipit. Felis bibendum ut. | 18/22.7 | 20/25 |
| .h6 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc congue nisi vitae.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc congue nisi vitae. | 16/20 | 18/22.5 |
Eyebrows
For sizing use .text-sm, .text-lg etc.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.