Skip to main content

Typography

Know ho to use fonts at OCASI and learn best practices for multilingual projects, readability, and accessibility

On this page:

  1. About typography at OCASI
  2. Font family
  3. Unconventional fonts
  4. Fallback fonts
  5. Multilingual
  6. Font size and accessibility
  7. Readability

1. About typography at OCASI

Text is one of the primary ways OCASI communicates with our audience because it sets the mood, tone, and style of our documents and designs.

Our research papers, policy reports, handouts, presentations, kits, flyers, posters, videos, webpages, and other documents should be easy to eye-scan and read.

The following fonts and typographic guidelines serve the objectives indicated in OCASI statement of principles and objectives.

2. Font family

OCASI brand font is IBM Plex™, a typeface family designed by Mike Abbink (IBM Brand Experience & Design) and Bold Monday type foundry.

  • It is a neutral style typeface
  • It includes Sans, Sans Condensed, Mono, and Serif subfamilies
  • It has good legibility in print, web, and mobile interfaces
  • It is designed to work for small and large font sizes
  • It comes in different weights and styles
  • The different font designs work well independently and together
  • It does not need to be combined with other fonts at OCASI since it contains fonts that fall into multiple classifications (font superfamily)

Download

🤔 🤔 🤔
What is Serif and Sans Serif? and what is the difference?

License

  • IBM Plex™ is licensed under the Open Font License
  • Fonts can be used freely in print and digital projects at OCASI

3. Unconventional fonts

Display and handwriting are unconventional fonts, not fonts used for reading purposes.

Display or handwriting fonts are allowed on large display titles or call-to-actions (CTAs) for creative integrated campaigns (including ads, email, social media, etc) where a unique design is needed.

As for the style, stencil or brush fonts work well for bold or alternative messages.

4. Fallback fonts

Fallback fonts are used when the current font is not available. For both Google Docs and MS Office, you can use the following default fonts:

  • Serif font: Cambria
  • Sans serif font: Calibri
  • Monospace font: Courier New

As for web fonts (CSS), learn more in the fallback font stacks section under the Bootstrap Framework guide.

5. Multilingual

Considerations

The following are some basic typeface considerations:

  • If you are working with the Latin alphabet, select a typeface that has the accents available for French, Portuguese, Spanish, or other languages.

  • If your content will be translated into Russian, select a typeface that contains the Cyrillic alphabet, if it is Greek then the Greek alphabet, if it is Chinese, then use Asian scripts, and so on.

Styling considerations:

  • Some text styling could be formatted differently from one language to another because of legibility. For example, the same italic text in English maybe does not look good in Arabic.
  • Some languages are longer in length than others and could affect your design.

Web content considerations:

  • Do not convert text headings or paragraphs in other languages as images for your webpages.
  • Encode your pages as UTF-8 (Unicode) to show most characters for most people.

Fonts

IBM Plex is the branded font and it covers many Latin and non-Latin scripts, and some Asian scripts. You can download all the IBM Plex fonts from the font assets section.

In case IBM Plex fonts are not available for your language, you may use alternative fonts. You can check and download the alternative fonts section on the font assets section.

6. Font size and accessibility

For the web

  • Work with a minimum of 16-18 px font size for the body text (for reference, this site uses 18 px)
  • Secondary pieces of text can be 2-3 px smaller
  • Make sure that text can be zoomed to 200%

For print

  • Use 12 pt for print body text (it depends on the font)
  • Large print materials should be at 16-18 pt

7. Readability

Type alignment

  • Left-aligned: flush text left as a standard practice to create alignments for the eye to follow and help with readability and content organization
  • Avoid: right-aligning and centre-aligning text
  • Do not: justify paragraphs (it creates “rivers” of white gaps between words)

Line spacing and vertical spacing

  • Line spacing: do not use too little or too much space in between paragraph lines
  • Paragraph spacing:
    • add enough clear space after each paragraph
    • break up large blocks of text, it creates more clear spaces
  • Ordered/unordered lists: separate the last item of the list from the next paragraph (if any)
  • Vertical spacing for headings:
    • you can decrease the line spacing for large titles in size and length
    • add extra spacing above headings and sub-headings rather than below

🤔 🤔 🤔
To go easy, use the default line and vertical spacing generated by the the program you are working on (i.e., on Google Docs.)

Line length

  • Small line widths: keep the length of the lines of text about 45-75 characters wide (10-15 words)
  • Headings: write headings that are less than 60 characters, it also helps with Search Engine Optimization (SEO)
  • Clear margins: keep wide left and right margins to help with line lengths

🤔 🤔 🤔
Keep in mind that more than 90 characters for desktop or 50 characters for mobile is too long for continuous reading, which makes our eyes get tired much sooner. As a consequence, our content pages run the risk of not being paid attention as desired and/or not being fully read.

Other best practices

  • Do not write paragraphs in all caps (title case)
  • Reduce hyphenation as much as possible (only recommendable for heavy print paragraphs laid out in columns)
  • Use effectively the hierarchy of headings (HTML tags for the web) to break up the content on a page, it is important for page structure, accessibility, and SEO
Back to contents