Effective typography is essential to Lighthouse. It establishes a clear visual hierarchy, enhances readability, and ensures that QubicaAMF's brand voice is communicated consistently across all digital products. Our typographic system is built upon a set of design tokens that define our font families, weights, sizes, and line heights, ensuring clarity and a harmonious user experience.

Guiding principles ​

Our typography is guided by the following principles:

• Clarity: Text should be easy to read and understand across all devices and contexts.
• Hierarchy: A clear typographic scale helps users navigate content and understand the importance of different pieces of information.
• Consistency: Applying typographic styles consistently, driven by tokens, reinforces our brand and improves usability.
• Accessibility: We aim for high levels of legibility and readability for all users, adhering to accessibility standards.

Global Guidelines ​

Global settings include font size, font weight and text formatting guidelines.

• Maintain Hierarchy: Use the defined typographic styles (H1, H2, Paragraph, Display, etc.) consistently to differentiate between levels of information and guide the user's eye effectively.
• Limit Variations: While a comprehensive set of styles is available, avoid using too many different typographic treatments on a single page to maintain clarity and a clean, professional appearance.

Headings ​

This group defines the font sizes for standard HTML headings. Use headings to break up and organize large amounts of information, they make it easier for users to find the information they are looking for. Headings also help to create a visual hierarchy, making it easier to scan and recognize content.

Display Headings ​

These Qubica-specific (q-) display heading sizes are for large, impactful typographic statements. Use display headings to make a heading stand out. Display headings are larger, slightly more opinionated heading style.

Paragraph ​

This group defines a versatile range of font sizes primarily for body copy, captions, and other general text needs Use paragraphs to communicate a message to the user, provide information, and guide them through the user experience. Paragraphs should be clear, concise and formatted in a way that is aesthetically pleasing and easy to read.

Lead ​

Use lead paragraphs for special paragraphs that need to catch the attention of the user.

Blockquote ​

Use block quotes to quote content from another source within your document.

Inline text ​

Use inline text elements to give a different style to part of your text; you can either cross them out, underline them or write them in italic.

Typography tokens ​

All typographic values are defined in Figma's primitives collection and compiled into the design system at build time. They are fixed values — they do not change across themes.

Font families ​

Font weights ​

Paragraph font sizes ​

Heading font sizes ​

Display font sizes ​

Line heights ​