Typography

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 Fonts and is released under the SIL Open Font License Version 1.1.

Different weights define hierarchy and emphasis in various elements.

Font styles provide additional ways to convey meaning and emphasis in text elements. While different styles such as italic can be used to highlight certain content, the default style applied is normal. This ensures consistency and readability across most text, reserving other styles for special cases.

Font sizes are assigned based on visual hierarchy needs. Not all sizes apply to every text element.

Use headings for page titles and section introductions. Headings are designed to stand out from regular text, creating clear visual hierarchy and making it easier for readers to follow the organization of the content.

Headings mark the start of new sections. Always use designated heading styles, rather than just bolding text or changing the font size, since proper headings are important for accessibility.

Appropriate heading levels guide users through the page, especially those using screen readers or other assistive devices. Correct use of heading levels also helps organize information, making content easier to scan.

Heading tags (<h1> through <h6>) should be applied in order, without skipping levels. Each page should have a single h1, typically reserved for the main title, and subsequent headings should follow in sequence (for example, use h2 after h1, not h4).

Used for paragraphs, long-form content, and general UI copy. It usually follows headings or subheadings, providing detailed information or messages. Body text should prioritize readability. Use sizes according to density and layout needs.

Used for inline guidance, validation messages, or tooltips. Helper text is typically small and subtle but must remain legible.

Used for prominent titles in components such as cards or modals. Use sparingly for component-level titles where a strong label is needed.

Used to describe UI elements such as form fields, checkboxes, or sections. Labels should be clear, concise, and consistent in weight and size throughout the product.

Used for navigational or interactive text elements. Links use clear, recognizable styling and must be distinguishable from body text.