05 · Typography

We Are Obsessed With the Beauty of Typography.

Few things communicate the look and feel of a brand more clearly than the way letters, numbers and symbols are put together. We strike a balance between legibility and interest.

Logo TypefaceFun. Modern. Inviting.

Cannabees Aa Bb Cc Dd Ee Ff Gg 0123456789

VAG Rounded Next Shine A font with a smile. Used for every logo execution and, occasionally, headline titles. Fallbacks: Arial Rounded, Tahoma, Verdana, Noto Sans.

Primary TypefaceA Workhorse Sans-Serif

Graphik

Light 300Body copy, lists

Regular 400Details, UI

Semibold 600H2, H3

Bold 700H1, H4, emphasis

For every other brand execution, print & digital. Fallbacks: Helvetica, Ubuntu, Arial — rarely.

Accent Typeface Adam Brand Colors · Cannabees Brand Guide · Version 1.0 The quiet voice: letterspaced eyebrows, captions and labels — exactly how the brand guide itself uses it. Medium for labels, Light for captions. Never for long body copy.

Event & Merch Display · Case by Case Live at the Hive Funkydori is reserved for stylized event & merch graphics, the one exception the guide allows. Never for body copy, UI or the logo.

Digital Type

The Web Type Scale

Set the h-level of each heading for SEO & accessibility, then style it with this scale. Rem values assume an 18px root.

Heading One Page headings, major sections, emphasized words Bold 80px · 4.44rem
Bottom margin 50px

Heading Two Section, blog body & product headings Semibold 52px · 2.89rem
Bottom margin 30px

Heading Three Sub headings, call-to-action headings Semibold 34px · 1.89rem
Bottom margin 30px

Heading Four Minor headings, table labels Bold 18px, uppercase · 1rem
Bottom margin 20px

Cannabees is more than a social experience. We are a thriving tribe. Come share your F.A.M.E. — and read how we talk before you write a word.

Body text, strong & text links Light 18 / 26px, Charcoal
Max width 700px · margin 16px
Strong: Medium · Links: Medium, green, underlined

Concerts come to an end. Our experience continues into every aspect of your life.

Block quotes 30 / 36px
3px left border · 40px left padding
Margins 20px 0

North America
- Sarasota, FL
- Los Angeles, CA
Europe
- London, UK

Ordered & unordered lists Light 18 / 26px
20px indents · margin 14–16px

Using Type

The Six Type Commandments

01Stay Left-Aligned, Rag RightMost people read left to right. Besides, we're a little off-center as a brand anyway.

02Skip Weights & Double SizeContrast is the name of the game. Skip a weight when pairing two, and double the size between elements.

03Align X-Heights or BaselinesWhenever text sits side by side, line up the baselines or the x-heights.

04Watch the RagIf the ragged edge makes a recognizable shape, tweak the copy or the container. Avoid single-word orphans.

05Give Things SpaceNegative space matters. Group what belongs together — just don't cram.

06Keep Line Length Reasonable45–70 characters per line, depending on font size.

Oh, Goodness, No…

Not For Us

✕ No unauthorized fonts.

Help me

✕ Don't stretch or squish type.

Too Much

✕ No strokes, outlines or drop shadows.

Centered multi-line text
is hard to read and
never on brand

✕ No centered or justified multi-line text.

I'm Falling!

✕ Only 0° or 90° (reading up).

S P A C E

✕ Keep tracking & leading reasonable.

For Developers · tokens.css

--cb-font-logo:   "VAG Rounded Next Shine",
                  "Arial Rounded MT Bold",
                  Tahoma, Verdana, sans-serif;
--cb-font-sans:   "Graphik", Helvetica,
                  Ubuntu, Arial, sans-serif;
--cb-font-accent: "Adam", "Graphik", sans-serif;

--cb-h1-size: 80px; --cb-h1-weight: 700;
--cb-h2-size: 52px; --cb-h2-weight: 600;
--cb-h3-size: 34px; --cb-h3-weight: 600;
--cb-body-size: 18px; --cb-body-lh: 26px;

Convert the .otf files to .woff2 before launching the website.