Edmodo Brand Typefaces

What fonts to use, and when to use them
In the actual product, due to loading times and other technical limitations, system fonts will be preferred and used in most cases. However, in marketing materials and landing pages, we are not bound by this limitation. The Edmodo brand uses two main typefaces for display and text settings.

Headlines
Vulf Sans
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcedfghijklmnopqrstuvwxyz
1234567890{[(!?@#$¢€%&*)]}

This typeface, originally designed as the sans counterpart to Vulf Mono, is a vibrant and organic design intended for large sizes. Vulf Sans excels at large sizes. The Edmodo brand makes use of the Light and Regular weights, but not any weight bolder than that. If the type you’re setting is larger than body copy, it will probably be Vulf Sans.

Text
Disclaimer
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcedfghijklmnopqrstuvwxyz
1234567890{[(!?@#$¢€%&*)]}

Disclaimer is the name of the typeface you’re reading now. It has thin joints, straight stems, conventional proportions, and generous ink traps. All these features are designed to make Disclaimer excel at text sizes. The regular weight is the most
used in the Edmodo design system, but the Bold can be used for emphasis and same-size-as-the-text heading, as seen above.

Additional glyphs and dingbats
Both Vulf Mono and Disclaimer include arrows in their character sets. These look like this: ←↑→↓. The easiest way to type them is to go to copypastecharacter.com and click them. They should be 21st–24th in “Our favorite set.” These arrows should be used where logical, instead of generating images of arrows as an extra image or in the css.

Edmodo Typographic Style

Things to avoid, things to strive for, common mistakes, and things to die for.

Dashes
One should always be aware that an emdash (—) is used mid sentence—connecting two or more thoughts. Endashes (–)are narrower, and work well for dates (1970–1975). Finally, hyphens (-) are used exactly how you think they should be.

Quotes
Even in email communications, we can use to proper quotes. “Dumb quotes” (“) are used to denote inches or other measurements. You can easily remember what quote appears on which side just by remember the number “69.”

Figures
Because the Edmodo brand relies solely on lowercase and capitalized (not all-caps) text settings, non-lining figures are preferred, as they don’t call too much attention to themselves in text. Wherever possible, employ figures that look like this.

Emphasis
If you’re looking to emphasize a single work in a headline, try not to add emphasis, but rewrite the copy so it can work either way. If you are looking to emphasize a bit of text, the easiest way to do so is to change to a heavier weight of the typeface. If you’re setting Disclaimer Regular, the companion bold is Disclaimer Bold. If (due to printing considerations) using Disclaimer Medium for text, you can emphasize with Disclaimer Black.

Whatever you do, never ever set text in all caps. If you need emphasis, try to change weight, or structure the text with a different hierarchy.