Typography

Our approach to the typographic system uses Open Sans as its web typeface. It has been chosen for its legibility, neutral tone and broad availability, helping create clear hierarchies and organize information that guides users through Namirial products and experiences.

Type tokens and setsCopy Anchor Link

Namirial manages typography through type sets: pre-set configurations of typographic elements such as font size, weight and leading (line-height), calibrated for use alongside Open Sans. Selecting the appropriate type style is determined by the layout or template structure, which may require different levels of hierarchy.

Productive and expressive type setsCopy Anchor Link

Type sets fall into two groups:

• Productive styles — Heading and Paragraph. Primarily used within product spaces, where a more condensed treatment keeps users focused on tasks and supports the hierarchy of information.
• Expressive styles — Display. Larger, more dramatic type for editorial and marketing design. Excellent for high-impact statements, but distracting if used inside product UI.

Display and Heading share a tight line-height of 130%; Paragraph uses a more open line-height of 150% for comfortable reading. The standard base text size is 16px (Paragraph M).

Expressive — DisplayCopy Anchor Link

Productive — HeadingCopy Anchor Link

Productive — ParagraphCopy Anchor Link

TypefaceCopy Anchor Link

Namirial uses different typefaces depending on the context: a distinctive face for the brand mark, and neutral, widely available faces for everything else.

On the web, the base font family is Open Sans, an open-source humanist sans-serif, always paired with a system fallback stack:

font-family: 'Open Sans', system-ui, sans-serif;

ScaleCopy Anchor Link

The type scale is the set of sizes available across the system. It is built on a 16px base and spans from compact reading sizes up to large display sizes.

StyleCopy Anchor Link

Font weight adds emphasis and differentiates content hierarchy. Weight and size pairings must be balanced: a bold weight always carries more emphasis than a lighter weight at the same size, but a larger light-weight size can still rank higher than a smaller bold one.

Namirial uses a focused subset of Open Sans weights for digital experiences:

Semibold is ideal for section headers but should not be used for long text.

Type colorCopy Anchor Link

Type color should be chosen with legibility and accessibility as paramount concerns.

• Keep type color neutral in running text (the foreground/neutral tokens from the Color System).
• Use the brand accent color for primary actions and text links.
• Reserve semantic colors (info, positive, warning, negative) for messages, alerts and status text.

Using typography in Namirial communicationCopy Anchor Link

Text alignmentCopy Anchor Link

Alignment should support readability first and be used expressively only when it adds meaning.

• Left alignment — default. Use it for body copy, lists and the vast majority of interface text. It is the easiest to scan and read.
• Center alignment — selective. Reserve it for titles and short lead paragraphs, where the line count is low and the content is meant to feel balanced.
• Right alignment — emphasis only. Use it sparingly to emphasize content, such as block quotes or a claim placed over a photo. Avoid it for running text.

Text on imagesCopy Anchor Link

Headlines, sublines and text should remain readable on every background. Achieve this through:

• High contrast between text and the background image.
• Good text sizing, so copy stays legible at the intended viewing distance.
• Enough whitespace to let the image breathe — text should not overlay the main subject of the image.
• A focused tone of voice — keep text short and punchy, leaning on keywords.

ResourcesCopy Anchor Link

• Open Sans on Google Fonts
• Color System