πŸ…°οΈ

Typography

Typography

image

Primary Typeface

Inter.

Our primary typeface used for all brand copy.

A clean & modern sans-serif font.

Inter, designed by Rasmus Andersson, is a sans-serif typeface designed specifically for screens. Inter features a tall x-height that increases legibility using all sizes, and includes a wide array of glyphs, weights, and special features. We love it!

Inter is free and open-source: As such, neither paid licenses nor accreditation are required for use.

Download it free from rsms.me/inter (we recommend the standard non-variable version).

Acceptable Alternatives

Inter should be used for every brand execution. In rare circumstances, however, we recognize it is not realistic to use custom fonts. In which case, system default sans-serif fonts should be used: Helvetica and Arial, respectively.

Note: this should not occur frequently.

Headline Typefaces (Experimental)

****WARNING****

****This section is experimental. If you are unsure what to do, please ignore this section and continue to use the Inter font for all headlines and body copy. ****

We are interested and currently experimenting with a handful of alternative typefaces purely for headline copy. These are unlikely to be used daily but, may come in handy for specific use cases in the future.

Typefaces that are currently being experimented with:

If you wish to develop graphics using these fonts as part of your arsenal then please do so. We would like to see what the SOSC community creates using them.

Some potential use cases:

  • Limited merchandise design
  • Website landing pages
  • Infographics

We are also open to headline font recommendations from our community providing they meet the following criteria:

  • Fully open-source or free for commercial use
  • Preferably more than one weight (not required)
  • Must pair well with our primary typeface (Inter)

Hierarchy, Color & Weight

Inter has many different weights but, we typically prefer to use Regular and Semi Bold.

Use contrast between wider and thinner weights to communicate relevant importance, otherwise known as hierarchy, of information.

We also tend to tighten up the kerning between headline copy for more punch.

Our logo(s) are set in Inter Semi Bold and this is also the most commonly used weight in headlines.

Body Copy:

  • Regular weight
  • #ffffff (75% opacity) or #bfbfbf for light text on black background
  • #010101 (65% opacity) for dark text on a white background

Header Copy:

  • Semi Bold weight
  • #ffffff for light text on a black background
  • #010101 for dark text on a white background
image

Typography Layout Tips

When constructing layouts, these tips will help you build dynamic, interesting, and on-brand compositions with typography.

While these rules are proven and sound, sometimes breaking them is the right call.

1. Stay Left-Aligned, Rag Right

Legibility and clarity are vitally important to great typographical layouts. Since most people read from left to right, we should align our type accordingly.

2. Skip Weights & Double Size

Contrast is the name of the game when it comes to great design. When in doubt, skip a weight when pairing two weights, and double the size between two text elements.

3. Align X-Heights or Baselines

Whenever you place text next to each other, either align the baselines (the line that the bottom of a lowercase x sits on) or align the x-heights (the top of a lowercase x). This helps align each line visually.

4. Watch The Rag

When setting paragraphs, keep an eye on the right (ragged) edge. If the rag unintentionally creates a recognizable shape, consider tweaking the language or resizing the container. Also, try to prevent single-word lines (orphans).

5. Give Things Space, If Needed

Negative space, or the space around elements is vitally important. That being said, if informational elements belong together, move them closer together. Use grouping wisely: just try not to cram too many things in one space!

6. Keep Line Length Reasonable

It is easy for the user to get lost in long lines of text, and short ones are easily ignored. It’s best to keep lines between 45 and 70 characters long, depending on the size of the font. This will ensure legibility as the font sizes increase or decrease.

Common Errors

I have seen all of these errors in the past, it ain't pretty. Please avoid them wherever possible.

Errors:

  1. Using incorrect fonts
  2. Poor kerning and line tracking
  3. Centred text unless necessary
  4. Distorting text vertically or horizontally
  5. Applying stroke to text
  6. Rotating text

Note: This is not a comprehensive list of errors. It is simply the most common or egregious.

image

← Previous

πŸ’ 

https://design.shinyobjects.gg

Β© Shiny Object Social Club