design principles

Typography

How understanding  typography & hierarchy can help you better convey information

Font families

Serif 

Sans-serif 

Display

Script

Monospaced

Weights

different weights for different emphasis

Alignment

Spacing

Kerning is the space between letters.

Sometimes, just subtle adjustment can make a whole difference

Don't be afraid

Of adjusting the letter spacing, specially when using headers and titles. Usually, it's necessary !

Don't be afraid

Of adjusting the letter spacing, specially when using headers and titles. Usually, it's necessary !

Sometimes, you can use the extra spacing for a dramatic

EFFECT

specially when going full caps on your titles

Sometimes, you can use the extra spacing for a dramatic

EFFECT

specially when going full caps on your titles

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at dapibus ex, a scelerisque orci. Donec tristique sed dolor vel semper. Pellentesque id commodo purus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at dapibus ex, a scelerisque orci. Donec tristique sed dolor vel semper. Pellentesque id commodo purus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at dapibus ex, a scelerisque orci. Donec tristique sed dolor vel semper. Pellentesque id commodo purus.

Too much ! 

Just righ

Too tight !

Big text usually needs the spacing to me manually adjusted

Big text usually needs the spacing to me manually adjusted

Justification

When in doubt, always justify left !

Consistency

White space

Colors

Black text might be too contrasting in big sizes

Don't be afraid to use dark grays !

In a similar way, black background contrasts too much with white text

Use some more subtle color for the background, or even for the text itself.

Pay attention to contrast when using colors !

There's no need to be too drastic, choose wisely !

https://www.dafont.com/

https://fonts.google.com/

https://www.fontsquirrel.com/

Free font resources

Design principles - typography

By Felipe Delestro

Design principles - typography

  • 606