Typography
Last updated
Last updated
Typography at Agora is the cornerstone of our design language, facilitating clear communication and efficient reading experiences. Our approach is tailored to ensure coherence and accessibility across all platforms, leveraging the adaptability of system fonts like Inter for web and SF fonts for iOS.
At Agora, typographic styles are crafted with precision, aligning to a 4px grid for consistent vertical rhythm. Our unit of measure is rooted in accessibility, with rem units serving as our standard to support browser zoom preferences. Agora typography is designed to embody clarity and hierarchy, ensuring our content is effortless to consume and navigate.
Headings at Agora denote the structure and significance of the content, guiding users through our content with ease. Our headings adopt a semibold weight, striking a balance between prominence and readability, perfect for drawing attention without overpowering the accompanying text.
For body text, regular weight is our go-to choice, providing a comfortable reading experience for longer passages. It's the bedrock of our content, ensuring that the message is delivered without visual fatigue.
Medium weight is reserved for buttons and other actionable text elements, offering the necessary distinction to prompt user interaction. It's about commanding attention and indicating an invitation to take action.
While bold and light weights are part of our typographic toolkit, their use is intentional and sparing. We believe in purposeful emphasis and strive to maintain a clean aesthetic without over-reliance on weight variations.
Hierarchy is not merely a visual tool; it's the organization of content to reflect the importance and guide our users intuitively through their journey. We achieve this not through color but through structured weight differences and size decrements. Each typographic element, from headings to body text, is thoughtfully sized down in 4px decrements, maintaining visual harmony and reinforcing the content's structure.
In establishing a visual hierarchy, we emphasize efficiency and directness. Text should be organized in a clear, descending order of importance, allowing users to scan and comprehend with ease.
Line Height: We adopt unitless line-height values for seamless alignment with our 4px grid.
Line Length: Keeping to the recommended 80 characters or less per line ensures optimal readability and comfort.
Type Alignment: Content is generally left-aligned, providing a clean and organized appearance.
Text paired with icons should be center-aligned, creating a visual connection that enhances comprehension. This alignment respects the spatial relationship between text and accompanying graphics, ensuring a seamless flow of information.
