Catnip
Typography
Typography is used to arrange typefaces in a user interface to ensure text is legible, readable, and scalable.
H
H
H
H
H
H
H
Fonts
We use the Inter font family as the foundation for our design system. Inter is a modern, versatile typeface designed for readability and clarity, making it ideal headlines, paragraphs, components and menus across Signicat products. Its tall x-height ensures legibility across various sizes, while its wide range of weights and styles allows flexibility in creating typographic hierarchies.Our three primary colors are used in all branded materials. They are dominant for creating recognition and are consistent across all our digital platforms, use them as much as possible like in Illustrations, individual elements, buttons, text, backgrounds and so on. Primary purple color contains a palette of 12 distinct purple tones. It includes two of our main colors Purple 900 and 600. Accent primary green 300 color contains a palette of 12 distinct green tones.
SF Pro Display
The SF Pro Display font family is used for IOS devices headings, paragraphs, components and menus across Signicat products.
Roboto
The Roboto font family is used for Android devices headings, paragraphs, components and menus across Signicat products.
.svg)
Open UI Kit
Figma file
Typography principles
Typographic principles are fundamental to crafting text that is both visually appealing and easy to read. Establishing a clear hierarchy helps guide the user's eye through the content by using varying font sizes, weights, and styles. Proper alignment ensures the text looks clean and organized, while contrast highlights key elements, making important information stand out. Consistency in typography fosters a cohesive and professional appearance, while thoughtful attention to spacing—such as kerning, leading, and tracking—enhances readability and visual comfort. Legibility is crucial, the Inter font family ensures text is easy to read and well-suited to the users. Finally, the strategic use of color not only improves readability but also conveys meaning effectively.
Readability
Readability in UX design is about how easily users can read and understand textual content on digital platforms. It’s a critical aspect of user experience, as it affects the user’s ability to effectively consume information. Good readability is achieved through careful presentation and language choices, ensuring that users can comprehend the content with ease. It involves a balance of accessibility, legibility, and comprehensibility, where legibility is about distinguishing characters and words, and comprehensibility is about grasping the intended message. High readability in UX design enhances user engagement, comprehension, and satisfaction, and it can also improve SEO and help users perform intended actions after reading the text.
Best practices:
- Use simple words and avoid jargon or complex terms.
- Keep sentences concise.
- Break up long paragraphs into smaller chunks.
- Tailor your content to the audience
- Limit paragraphs to around ~80 words.
Legibility
Legibility is the lowest-level consideration in content usability: it’s whether people are able to see, distinguish, and recognize the characters and words in your text. Legibility is thus mainly determined by visual design, specifically typography.
Best practices:
- Selecting clear, easy-to-read fonts is crucial.
- Text should be large enough to read comfortably, with the most important information being particularly prominent.
- High contrast between text and background improves legibility.
- Adequate spacing between lines of text (leading) and between characters (kerning and tracking) can make a significant difference in how easily text can be read.
- Left-aligned text is typically the easiest to read because it creates a consistent visual edge.
- Breaking text into shorter paragraphs helps readers digest information in manageable chunks.
- Using bulleted or numbered lists can help organize information and make it easier to scan.
Comprehension
Comprehension measures whether a user can understand the intended meaning of a text and can draw the correct conclusions from the text. In the case of instructional or action-oriented content, we also want users to be able to perform the intended actions after reading the text.
Best practices:
- Establish a purpose and activate prior knowledge.
- Use strategies to monitor comprehension, such as questioning and summarizing.
- Reflect on the text and integrate new information with existing knowledge.
