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 eget dolor morbi. Pellentesque habitant morbi tristique senectus. | 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 eget dolor morbi. Pellentesque habitant morbi tristique senectus. | 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 eget dolor morbi. Pellentesque habitant morbi tristique senectus. | 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 eget dolor morbi. Pellentesque habitant morbi tristique senectus. | 18px | 28px 155.556% 1.75rem |
Headings
| Mobile | Desktop | ||
|---|---|---|---|
| .h1 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt. | 36/45 | 60/75 |
| .h2 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut. | 30/37.5 | 48/60 |
| .h3 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut. | 24/30 | 30/37.5 |
| .h4 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc. | 20/25 | 24/30 |
| .h5 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore. | 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 suscipit. Felis bibendum ut tristique.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. | 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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.