Typography
Typography component is a primitive. This means that using this component, you can create any typography variant that is included in the Halstack Design System.
For our sans-serif font-family we use Open Sans; a modern, humanist sans-serif typeface designed by Steve Matteson. It is known for its clarity, neutrality, and readability across a wide range of digital and print applications.
With its open forms, neutral yet friendly appearance, and optimized legibility at small sizes, Open Sans is optimized for both web and mobile interfaces, balancing aesthetic appeal with functional clarity. The typeface includes a wide character set that supports Latin, Greek, and Cyrillic scripts, making it suitable for internationalization.
Open Sans can be accessed via Google Fontsand is released under theSIL Open Font License Version 1.1.
Our Typography component should be considered a fallback option and used only when none of the following components meet your specific needs. Each of these components is designed to convey structure and meaning more effectively within an interface:
- Heading: Provides semantic structure and visual hierarchy to content sections, improving both navigation and accessibility.
- Paragraph: Used for blocks of body text, supporting longer-form content while maintaining readability and consistent spacing.
- Bulleted List: Ideal for presenting items or information in a non-sequential list, helping users quickly scan grouped content.
If your use case isn't addressed by any of these components, please reach out to our team. We're happy to evaluate your scenario and find a suitable solution.
- Keep a clear visual hierarchy: Use different sizes, weights, and styles to organize content. This helps users quickly understand the structure and importance of information.
- Prioritize readability: Make sure there is enough contrast between text and background to ensure it's easy to read for everyone.
- Allow for sufficient white space: Space between lines, paragraphs, and elements improves legibility and creates a more open, scannable layout.
- Ensure responsiveness: Typography should adapt to different screen sizes and resolutions without breaking or becoming hard to read.
- Avoid overusing all caps: All-uppercase text is harder to read in longer blocks. Use it sparingly for labels or short button text.