Brand Portal
Typography
Typography works best when it feels natural and blends into the design. The main things to focus on are keeping it consistent, organizing content clearly, and aligning everything neatly.
Typeface
Inter
We only use one font for our b2c marketing materials. The Inter font is a modern and versatile typeface designed for optimal legibility across digital and print media, making it ideal for creating a clean and approachable brand identity. Its geometric shapes and balanced letterforms lend a professional yet friendly tone, ensuring consistency and clarity in all brand communications. It is the typeface used in our platform.
Merryweather
The Merriweather font is a modern and versatile typeface designed for optimal legibility across digital and print media, making it ideal for creating a clean and approachable brand identity. Its geometric shapes and balanced letterforms lend a professional yet friendly tone, ensuring consistency and clarity in all brand communications. It is the typeface used in our platform.
Type Basics
Tracking
Small Text (below 12px): Keep it default or increase tracking slightly, typically by +10, to improve legibility.
Headlines and Large Text (24px+): Default or +1-2.
Body Text (12px–18px): Minimal adjustments are needed, but a subtle increase of +2 to +5 can make paragraphs feel more open and easier to read.
Flush Left
Flush left alignment improves readability by providing a consistent starting point for the eye, aligning with the natural left-to-right reading flow. It also creates a clean, professional appearance while avoiding the awkward spacing issues often seen in justified text.
Flush left alignment is the go-to choice for clear, professional, and reader-friendly designs, while center or right alignment should be used selectively to support specific design intentions.
Case
For brand elements, case usage should be consistent and purposeful.
Headlines should follow Title Case to maintain a professional and structured appearance, ensuring readability while emphasizing key words.
Subheadings and body text should use Sentence case for a natural and approachable tone, improving readability, especially in longer paragraphs.
In buttons and CTAs (Call-to-Actions), uppercase is recommended for emphasis, making them stand out—think “SUBMIT” or “LEARN MORE.” However, for a softer, more conversational tone, Sentence case can also work, such as “Sign up now.”
Leading
Choosing the right leading (line spacing) is crucial for readability and visual balance. Proper leading ensures that text doesn’t feel cramped or overly spaced, making it easier for readers to follow lines without losing their place. It also influences the overall aesthetic, helping to create a polished, harmonious design that aligns with the intended tone and purpose.
Body Text: Leading is typically 120% to 145% of the font size. For example, if the font size is 16px, the leading (line height) would range from 19px to 23px. This provides enough spacing for comfortable reading in paragraphs.
Titles/Headlines: Leading for titles is usually 100% to 120% of the font size. Since headlines often have fewer lines, tighter spacing can create a more cohesive and impactful appearance.
Small Text (Captions or Footnotes): Small text may require slightly looser leading (130% to 150% of the font size) to improve legibility.
Line length
For optimal readability, line lengths should be carefully managed to ensure a comfortable reading experience.
In body text, lines should generally range between 50–75 characters per line, including spaces, to prevent strain on the reader’s eyes. Excessively long lines make scanning difficult, while very short lines create choppy, disjointed reading.
Within container elements such as callout boxes, buttons, or sidebars, line lengths should be adjusted to maintain balance and avoid awkward breaks. Text should never extend fully to the edges of a container.
To maintain readability and a balanced layout, adequate padding and margins should be applied, ensuring the text has room to breathe. Lines that stretch too wide can feel overwhelming, while text that is too tightly confined disrupts readability. Proper spacing within containers helps create a structured, polished look and improves the overall reading experience.
Headlines & subheads
Headlines should be bold, clear, and visually distinct, using larger sizes and heavier weights to establish hierarchy. Subheads provide supporting context with a lighter weight or smaller size. Consistent alignment, spacing, and contrast should be maintained to create a strong visual impact and seamless brand identity.
Headlines should be stacked into two or three lines rather than stretched into a single long line. This creates a more compact and readable unit while helping to prevent widows and awkward breaks. Line breaks should be intentional, keeping important words together and maintaining a natural reading flow for better visual balance.
Dashes
Hyphens (-): Used to join compound words (e.g., “well-being”).
En dashes (–): Used for ranges (e.g., “10–15 minutes”).
Em dashes (—): Used for breaks in thought—like this—with no spaces.
Apostrophes & Quotes
Use curly quotes (“ ”, ‘ ’) instead of straight quotes (” “).
Use double quotes (“ ”) for primary quotations to improve readability on screens.
Use single quotes (‘ ’) for quotes within quotes or when needed for emphasis.
Apostrophes should also be typographically correct (‘ not ‘). Apostrophes are used for:
- Contractions
- Possessives
Avoid using straight quotes (‘ or “) for apostrophes—they are meant for coding, not typography.
Blockquotes should be indented or set in italics with a slightly larger or different weight than body text.
Avoid excessive quotation marks—use only when quoting directly.
For UI elements (buttons, labels), avoid excessive quotation marks unless necessary for clarity.
Belt and suspenders
Belt and suspenders refers to using multiple redundant methods to emphasize or ensure something, like bolding and underlining a word, or adding extra layers of information or emphasis that might not be necessary.
Rags, orphans, widows
To maintain clean and professional typography, avoid rags, orphans, and widows in all text layouts.
Rags—uneven, jagged edges that appear on the right side of left-aligned text. Should be carefully adjusted to create an even edge in left-aligned text, preventing distracting gaps or uneven shapes.
Orphans—single word or short lines left at the beginning of a new column or page. Should be manually adjusted through line breaks or spacing refinements.
Widows—single word or short phrase left alone at the end of a paragraph. Should be avoided by adjusting text flow, tracking, or paragraph breaks to maintain visual balance and readability.
