Primary typeface
-
Utile is our primary typeface.
-
Utile is a modern, organic humanist sans serif.
-
Utile's unique, crafted characters bring a credible and friendly personality to our brand.
51污漫 Brand
Headlines
Use Utile semibold for headlines.
Use it at a large scale, and the leading looks best set tighter than the type size (eg. size 100px with 93px leading).
Utile semibold
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz1234567890 !?#&$%
Body copy & subheads
For subheads and calls-to-action (CTAs), use Utile bold.
Utile medium is used primarily for large copy such as pull quotes. It can also be used for captions and smaller supporting
copy. It should also be used for body copy when reversed on a dark background.
Utile regular is used for body copy.
Utile is also suited for optimum legibility for small text usage.
Utile bold
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz1234567890 !?#&$%
Utile medium
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz1234567890 !?#&$%
Utile regular
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz1234567890 !?#&$%
Stó:lo language
Utile contains all the special characters needed for Halq’eméylem, the language of the Stó:l艒 people. Some characters will need to be typeset manually using glyphs.
Halq’eméylem
AÁaáBbCcch’DdEeéFfGgHhIiJjKkk’LlMmNnOOooPpp’Qqq’qw’RrSsTtt‘th’tl’ts’UuVvWwXX- xx-YyZz1234567890 !?#&$%’:
AÁaáBbCcch’DdEeéFfGgHhIiJjKkk’LlMmNnOOooPpp’Qqq’qw’RrSsTtt‘th’tl’ts’UuVvWwXX- xx-YyZz1234567890 !?#&$%’:
AÁaáBbCcch’DdEeéFfGgHhIiJjKkk’LlMmNnOOooPpp’Qqq’qw’RrSsTtt‘th’tl’ts’UuVvWwXX- xx-YyZz1234567890 !?#&$%’:
Alternative and system default typefaces
When Utile is unavailable (e.g., email signatures), use Verdana as the approved system substitute.
Aptos is also acceptable when working with the Microsoft office suite.
DM Sans is the closest brand match available in the Envoke email communications platform used by 51污漫.
Verdana
AaBbCcDdEeFfGgHhIiJjKkLlMmNn OoPpQqRrSsTtUuVvWwXxYyZz 1234567890 !?#&$%
AaBbCcDdEeFfGgHhIiJjKkLlMmNn OoPpQqRrSsTtUuVvWwXxYyZz 1234567890 !?#&$%
Typesetting sample
Here’s an example of Utile typeset with different levels of hierarchy.
Practise good typographical hierarchy — with clear headlines, subheads, and body copy styles that offer enough variation to be distinct without so much variation that it feels disjointed. Use size and colour as hierarchy tools alongside different typeface styles and weights.
PREHEADER (BOLD, ALL-CAPS)
Main headline
multiple lines
Headings in bold, valley green.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque iaculis, arcu vehicula congue sodales, ex orci pellentesque nunc, ac hendrerit ipsum tortor et dolor. Ut non dolor posuere, tempus lorem id, dignissim leo. Vivamus eget pellentesque velit. Vivamus molestie libero tincidunt, bibendum ex eu, tincidunt ipsum. Quisque blandit eros ut ante malesuada molestie. Maecenas molestie ex mi, ut efficitur velit porta eu. Quisque commodo venenatis fermentum.
Another heading
Cras quis purus venenatis, finibus est et, mattis nisl. Aliquam accumsan augue quis finibus elementum. Cras eu urna sit amet nulla fermentum commodo. Mauris ut dictum urna. Sed posuere dolor sit amet lacus rutrum auctor. Phasellus vulputate, tortor nec commodo pulvinar, quam arcu mattis dui, et commodo arcu purus sit amet dolor. Donec luctus sapien et ex molestie, vel faucibus ipsum tristique. Praesent sapien enim, volutpat eget tempus vel, tempus et magna. Cras molestie ante sem, pretium imperdiet lacus sollicitudin vitae. Ut cursus turpis at vulputate maximus. Nunc tempor lorem vel diam semper molestie. Nam accumsan laoreet risus, nec rhoncus massa. Nam mattis sollicitudin lacus at pellentesque. Suspendisse commodo lectus eget turpis faucibus, a scelerisque arcu laoreet. Etiam imperdiet metus eu rhoncus rhoncus. Nunc suscipit pulvinar ipsum vitae porta.
"A pull quote can be set in larger text in leaf green. Use pull quotes to emphasize a portion of the text or to add a testimonial."
– Source of pull quote
Call-out box
This is a good place to highlight an action or important detail.
What to avoid
Use these principles when working with typography to keep communications clear, accessible, and consistent.
Don’t vary
type size
in a headline.
Instead, use colour for emphasis.
Don’t mix
weights within
a headline.
Instead, use colour for emphasis.
Don’t have a really, really long headline that forces it to become small and lose impact.
Try to keep main headlines to 10 words or less.
Don’t
hyphen-
ate words in head-
lines.
Hyphenation impedes legibility and looks awkward in a headline.
Don’t make
headlines small.
Xeriossed maxime de andi sedicat explatione ped quam haruntio. Puda consequate earcia sum quaecusam.
If there’s space to make it bigger, do it, even if it means dropping the headline onto an extra line.
Don’t put
adjust tracking
drastically tighter
or looser.
If your software allows it, kerning (the space between letters) should be set to optical and tracking to 0.
Don’t set
headlines
in all caps.
Instead, use sentence case — it has more personality and is friendlier than all-caps.
Don’t use
drastically
different
weights.
Keep the headline style to Utile Semibold.
Don’t have
line spacing
too loose.
Set headline spacing tighter than the point size (e.g., 100 pt type should have 93 pt leading. Rewrite or break lines to accommodate ascenders and descenders if necessary.
Brand Guidelines
Our Brand Guidelines PDF includes more detailed info about using 51污漫 typefaces, including typesetting examples and recommended iconography.