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 et netus. Pellentesque elit ullamcorper. | 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 et netus. Pellentesque elit ullamcorper. | 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 et netus. Pellentesque elit ullamcorper. | 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 et netus. Pellentesque elit ullamcorper. | 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 eiusmod tempor incididunt ut. | 30/37.5 | 48/60 |
| .h3 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. | 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.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc. | 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.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. | 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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.