Booklet

author

Mike V Dijssel

Design

How do we supply typography in ul design

design

Design

|

HOW DO WE SUPPLY TYPOGRAPHY IN Ul DESIGN

'WEBDESIGN IS TYPOGRAPHY'
— by Oliver Reichenstein Founder of iA

BECAUSE...
Optimizing typography is optimizing:

  • Readability
  • Accessibility
  • Usability
  • Overall visual balance

So, How DO WE SUPPLY TYPO IN UI?

CHOOSE A SCALABLE TYPEFACE
Almost all the user interfaces require typography in various Sizes, in all types of components.
It's smart to choose a typeface that has a big family with multiple weights. And test them in different sizes. This is important for your usability and readability. Typefaces like:

DON'T USE TO MANY FONTS!
Using more than 3 different fonts makes a website look unstructured and unprofessional. Keep in mind that too many type Sizes and styles at once can also wreck any layout.
In general. limit the number of font families to a max of 2/3 and stick to the same ones through the entire website.
Complemental heading
If you use different fonts. ensure the font families complement each other based on their character width.

ALWAYS CARE ABOUT LEGIBILITY
Legibility is a measure of how easy it is to distinguish one letter from another in a particular typeface
GOLDEN RATIO:
Multiply your letter size by 1.618 and you will get perfect line height. When the font size gets bigger the line-height will increase.
The most common problem is lack of distinction between capital I and lowercase l. You need to avoid this kind of fonts because people will have problems reading them on small displays.

TREAT YOUR TYPO AS Ul
Don't just treat your text like places for content. treat your text as UI. Typography is so important. it's one of the fundamentals in your Ul.
Every text what represents a functional element. is part of the UI. Almost everything vou wil design apply to your type.

AT LEAST, SOME TIPS TO KEEP IN MIND:

  • Avoid all caps
  • Don't minimize spacing between lines
  • Use typographic hierarchy
  • Different letter-spacing in scaling type
  • Use white space
  • Tekst aligned
  • Avoid coloring text in red or green
  • Make sure you have sufficient color

LET'S TYPE NEXT LEVEL!

More booklets by Mike V Dijssel

More Design booklets

Your recently viewed booklets

  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
See all booklets