Typography
Learn about how to correctly use fonts, colors, and formatting to deliver impactful text! We strive to create a clear visual hierarchy which guides the user through text quickly and easily.
Fonts
Poppins is used for titles, headings, and quotes in presentations, documents, and marketing materials.
Poppins
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abdefghijklmnopqrstuvwxyz
1234567890
abdefghijklmnopqrstuvwxyz
1234567890
Source Sans Pro is used for large bodies of text in presentation, documents, and marketing materials.
Source Sans Pro
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abdefghijklmnopqrstuvwxyz
1234567890
abdefghijklmnopqrstuvwxyz
1234567890
Formatting
Using a different font for headers makes it easier to read text by visually distinguishing important sections, allowing for quicker scanning and comprehension of the overall content. So when formatting text, we use Poppins for titles, headings, and quotes, and Source Sans Pro for paragraphs of text.
Text that is left aligned is easier to read because it provides a consistent starting point for each line, facilitating smooth eye movement and better comprehension. This is why text spanning more than two lines should always be left aligned.
Highlighting
When drawing attention to important aspects of your text, use a bold font variant of the selected font. Set the rest of the text in a slightly duller tone to increase contrast of your bold text. When highlighting key points, select as few words as possible, and avoid highlighting a full sentence.
About Webalo
Webalo, the Platform for the Frontline Workforce, is a software platform that digitizes tasks and activities for frontline workers, providing real-time operational visibility and driving process optimization and improvement, across all areas of business operations. Webalo is enterprise grade, closely integrated with enterprise and industrial software systems, such as Microsoft, SAP, Rockwell, and Siemens. Built to operate in the face of massive amounts of real-time transactional usage by thousands of workers, Webalo helps the workforce make better, more informed decisions, and makes their businesses more productive.
Poppins
Source Sans Pro
Scale
Embracing a scalable text system is crucial for creating a harmonious and accessible user experience. It allows us to maintain consistency, establish a clear information hierarchy, and ensure legibility across all platforms and devices. A simple rule of thumb is to always have a larger scale for headers than for paragraphs, this empowers the user to seamlessly navigate through our content.
Do’s and Don’ts
We have compiled a series of comparisons for using texts in the hopes that we can collectively properly design texts and avoid common mistakes.
Don’t
use fonts other than those listed in the design system.
Do
use Poppins for headers and Source Sans Pro for body text.
Don’t
use the same text size for all text.
Do
use larger text sizes for headers to guide readers through the content.
Don’t
use different alignments, or align paragraphs to the right or center.
Do
align all text spanning more than two lines to the left.
Don’t
use underline to highlight text or headers. Only use underline for hyperlinks.
Do
use bold font variants to emphasize text, and underline for hyperlinks.