Design
Typography
Good things come in threes. Like Regular, Bold and Heavy. Our custom font, Mark for Thumbtack, works at all shapes and sizes.
Mark for Thumbtack
Based on FF Mark — designed by Hannes von Döhren and Christoph Koeberlin — Mark for Thumbtack was created with Monotype for our exclusive use.
This is Mark for Thumbtack.
Hierarchy
Adjust type weight and size to make sentences easy to read. Here are a few basics, although adjustments should be based on the medium or layout you’re designing for.
Heavy for short headlines.
Bold for longer headlines.
Regular for subheads.
Regular for body copy.
Typesetting
Once you pick the type weight, keep alignment and spacing consistent, but don’t adjust letter spacing in body copy. Copy should be left-aligned — it reads naturally.
Letter spacing
Tight, but not colliding. Reduce headline letter spacing as you increase the font size.
Line spacing
Keep this pretty tight as well. Set line spacing at 95% for headlines, 125% for body copy.
Type and image
When using type on top of images, put dark text on light imagery and white text on dark imagery. If the photo is noisy, use a subtle gradient to improve the contrast.
Black text on light images.
White text on dark images.
Gradient over noisy images.
Animating type
Type should be animated line-by-line, from a bottom left position keyframe to a top right position keyframe.
Title cards
Title cards usually come with a Tack animation that drops in above the type.
Captions
Captions have solid white backgrounds and the occasional blue word or phrase.
Typography don’ts
Don’t mix type sizes within a headline.
Don’t mix type weights within a headline. Keep headlines Heavy.
Don’t use the secondary palette.
Don’t apply drop shadows to text.
Putting it all together
Keep your friends close and your letter spacing closer.
Use the right weight for the job.
We like big type and we cannot lie.
