CSS Font Size Variables
The font size variables, defined within the :root CSS selector, ensure accessibility throughout your CSS stylesheets.
| Variable | Description | Default value |
|---|---|---|
--font-3xs | Font size variable for 3 extra small text. | clamp(0.55rem, calc(0.52rem + 0.14vw), 0.66rem) |
--font-2xs | Font size variable for 2 extra small text. | clamp(0.61rem, calc(0.57rem + 0.22vw), 0.8rem) |
--font-xs | Font size variable for extra small text. | clamp(0.69rem, calc(0.63rem + 0.31vw), 0.96rem) |
--font-sm | Font size variable for small text. | clamp(0.78rem, calc(0.69rem + 0.44vw), 1.15rem) |
--font-md | Font size variable for medium text. | clamp(0.88rem, calc(0.76rem + 0.6vw), 1.38rem) |
--font-lg | Font size variable for large text. | clamp(0.98rem, calc(0.83rem + 0.79vw), 1.65rem) |
--font-xl | Font size variable for extra large text. | clamp(1.11rem, calc(0.9rem + 1.04vw), 1.98rem) |
--font-2xl | Font size variable for 2 extra large text. | clamp(1.25rem, calc(0.98rem + 1.35vw), 2.38rem) |
--font-3xl | Font size variable for 3 extra large text. | clamp(1.4rem, calc(1.06rem + 1.73vw), 2.85rem) |
Customizing the Font Sizes
To customize the font sizes, you can override the default values of the font size variables by assigning new values to the corresponding --custom-* variables. Here's an example:
:root {
/* To customize the font sizes, you can customize one or all of the custom variables by assigning new values to them. */
--custom-font-md: 18px; /* Customize the font size for the md breakpoint */
--custom-font-lg: 24px; /* Customize the font size for the lg breakpoint */
}By updating these font size variables, you can achieve a unique typography style and influence the way the Text, Heading, and Link components are rendered.
Best Practices
- Stick with the provided font: We encourage you to use the provided font sizes and leverage the custom properties within the existing Text, Heading, and Link components as much as possible. This promotes design consistency and facilitates adherence to UX/UI best practices.
- Consider accessibility: When using the --font-3xs and --font-2xs variables, exercise caution as smaller font sizes can potentially compromise accessibility. Ensure that the text remains legible and meets the minimum contrast requirements to accommodate users with visual impairments.
Conclusion
The CSS font size variables allow you to create responsive typography styles for your project. By customizing the font sizes, you can achieve a unique design while maintaining consistency and following best practices. Experiment with different values and breakpoints to find the optimal font sizes that enhance readability and visual harmony.
Remember to test and preview your changes to ensure they align with your design goals. Strive for a balance between aesthetics and accessibility, ensuring that the text remains clear and legible across various screen sizes.
We hope this documentation helps you understand and utilize the font size variables effectively. Enjoy creating a visually appealing and user-friendly experience with customized font sizes!