Logotypes

Colors

Typography

Iconography

Imagery

Typography

Typography is an essential part of the WIRIS visual identity. It helps organize information, establish hierarchy, and ensure content is clear and easy to read across digital and brand experiences. Our typography system is built around approved brand typefaces and a defined scale that covers body, title and display text styles.

Used consistently, it strengthens recognition, improves readability, and brings a unified voice to everything we create.

Font families

Our typography system is built around two typefaces that serve different but complementary roles within the Wiris brand.

Noto Sans

Download

Private access content

Noto Sans is used for general text because it is highly legible, neutral, and versatile. Its clean and modern design makes it well suited for body copy, UI text, and longer reading experiences, where clarity and consistency are essential. It performs well across digital environments, supports a wide range of languages and characters, and helps create a functional and accessible reading experience.

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789“ ” ‘ ’ ? ¿ ! ¡ @ # % & * ( ) [ ] { } / \ - – — _ + = < > . , : ; …

Font weights

Different font weights are used to create hierarchy and improve readability. They help differentiate levels of information, add emphasis when needed, and make the typographic system more flexible across different uses. In our system, we work mainly with the Regular and Bold weights, using Regular for most text content and Bold to highlight key information and create clearer contrast between content levels.

The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.

Museo Slab

Download

Private access content

Museo Slab is used for large headlines because it brings more character, presence, and distinction to the Wiris brand. Its slab serif design gives it a strong and expressive personality, making it especially effective for display text, hero messages, and other high-impact brand moments where visual recognition is important.

Because it is only used for headings, we work with a single weight: 700. This helps maintain consistency across all headline applications and ensures a strong, clear, and recognizable visual impact whenever is used.

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789“ ” ‘ ’ ? ¿ ! ¡ @ # % & * ( ) [ ] { } / \ - – — _ + = < > . , : ; …

Body

Body styles are used for general text, paragraphs, and longer reading content. Their main purpose is to ensure clarity, readability, and consistency across all touchpoints.

At this level, typography should support the content without drawing unnecessary attention to itself, making information easy to scan and comfortable to read in both digital and brand contexts.

Noto Sans

Body / sm

Font size: 14pxLine height: 20px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus placerat, neque vitae elementum commodo, ligula est commodo tortor, ac vehicula erat quam a nisi.

Body / md

Font size: 16pxLine height: 24px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus placerat, neque vitae elementum commodo, ligula est commodo tortor, ac vehicula erat quam a nisi.

Body / lg

Font size: 20pxLine height: 28px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus placerat, neque vitae elementum commodo, ligula est commodo tortor, ac vehicula erat quam a nisi.

Title

Title styles are used to introduce and structure content across sections, helping create a clear and balanced hierarchy between major headlines and body text.

In this level, we use both Noto Sans and Museo Slab depending on the context: Noto Sans offers a cleaner, lighter, and more functional expression, making it suitable for informative or interface-related headings; Museo Slab brings more personality and brand character, making it ideal for titles that need a stronger visual identity and a more distinctive presence.

Noto Sans

Title / sm

Font size: 14pxLine height: 20px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus placerat, neque vitae elementum commodo, ligula est commodo tortor, ac vehicula erat quam a nisi.

Title / md

Font size: 16pxLine height: 24px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus placerat, neque vitae elementum commodo, ligula est commodo tortor, ac vehicula erat quam a nisi.

Title / lg

Font size: 20pxLine height: 28px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus placerat, neque vitae elementum commodo, ligula est commodo tortor, ac vehicula erat quam a nisi.

Museo Slab

Title / sm

Font size: 14pxLine height: 20px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus placerat, neque vitae elementum commodo, ligula est commodo tortor, ac vehicula erat quam a nisi.

Title / md

Font size: 16pxLine height: 24px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus placerat, neque vitae elementum commodo, ligula est commodo tortor, ac vehicula erat quam a nisi.

Title / lg

Font size: 20pxLine height: 28px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus placerat, neque vitae elementum commodo, ligula est commodo tortor, ac vehicula erat quam a nisi.

Display

Display styles are used for the most prominent messages in the brand, such as hero headlines, key statements, and high-impact communication moments.

Their role is to create strong visual presence, capture attention, and express the brand in a bold and distinctive way. They should be used sparingly, only when hierarchy and emphasis are needed at the highest level.

Noto Sans

Display / lg

Font size: 48pxLine height: 56px

Lorem ipsum dolor sit amet, consectetur adipiscing elit phasellus placerat, neque vitae elementum commodo

Display / md

Font size: 32pxLine height: 40px

Lorem ipsum dolor sit amet, consectetur adipiscing elit phasellus placerat, neque vitae elementum commodo, ligula est commodo

Display / sm

Font size: 24pxLine height: 32px

Lorem ipsum dolor sit amet, consectetur adipiscing elit phasellus placerat, neque vitae elementum commodo, ligula est commodo

Museo Slab

Display / sm

Font size: 24pxLine height: 32px

Lorem ipsum dolor sit amet, consectetur adipiscing elit phasellus placerat, neque vitae elementum commodo, ligula est commodo

Display / md

Font size: 32pxLine height: 40px

Lorem ipsum dolor sit amet, consectetur adipiscing elit phasellus placerat, neque vitae elementum commodo, ligula est commodo

Display / lg

Font size: 48pxLine height: 56px

Lorem ipsum dolor sit amet, consectetur adipiscing elit phasellus placerat, neque vitae elementum commodo