Published in


Web Design Tips : Typography

Web Design Tips : Typography

Using Wikipedia, Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed.

Typography is made for content!

This article is made to help you improve your type skills and understand how to use type by following some tips.

let’s start!

Tip 1

One font is enough: it is about focus, because choices confuse. I usually use Google font, they offer an directory of open source web fonts. I recommend Roboto as your font to start with. it is modern, clean and simple, with 12 styles.

Typography Tip: 1

Tip 2

Use contrast to direct the reader’s attention to the important messages. With Roboto font you have three methods: color, weight and size, choose one!

Typography Tip: 2

Tip 3

Find axis to align: More than to element need to have aligned, for vertical, align to left edge, for horizontal align to baseline.

Typography Tip: 3

Tip 4

When you change, change bigger, the variation should be recognizable. you can do that by doubling the point size.

Typography Tip: 4

Tip 5

Text: No smaller than a size of 14pt, align it to left, and limit line to 40–60 characters and line spacing between 120–160% of the size.

Typography Tip: 5

Tip 6

Use a grids to create hierarchy and give structure to your design.

Typography Tip: 6

Tip 7

Enjoy it! it is just type.

Typography Tip: 7

Thanks for reading this article. P.S If you liked this article, it would mean a lot if you hit the Clapping button or share with friends.

& Feel free to leave a note or Tweet to me, and Welcome to see my work on Dribbble.




Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ismail Elazizi

Ismail Elazizi

UX/UI Designer - Figma Organizer

More from Medium

4 Steps to Improve Your UI design Skills Quiqly

How I approach my “portfolio block”

Sketch of character with ideas of problem, thinking and solution

5 Useful Website for Web Designers

The importance of pixel-perfect design developer handover