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.
Our typography system is built around two typefaces that serve different but complementary roles within the Wiris brand.
Download
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.
Download
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 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 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 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