18 Typography Tips
Uploaded by
Jules Hayward18 Typography Tips
Uploaded by
Jules Hayward1. Emphasize the Typeface 2. Using the Grid 3.
White Space Balance
The design remains the primary tool The structure of a website is import- No one likes a cluttered website with
for grabbing the attention of a reader. ant for captivating the attention of the very little breathing room for the
As most web designers say, the design user. Simplify your design decisions text. Leaving some space for margins
will pull you in, but it is the content and give proportion and order to your on all sides is a must; equally vital
which impresses people. To add em- content by making use of a grid. is the leading. Too little white space
phasis to the content, it is essential affects readability; too much space
that you to choose the right typeface. does as well. Finding a visual balance
is very important.
4. Size Does Matter 5. Leading 6. Measure
All websites have a hierarchical Leading dramatically affects the The measure of a web page is
structure where the heads, the readability of text – depending on basically the width of your text. Too
subheads and the body text are the font size, typeface, and other narrow requires the person to shift
of different sizes. How much bigger measures, the line spacing should be his eyes and neck too much, while
than the subhead should the head selected for the best possible display. a too wide measure requires a lot of
be? What size should the text be? Typically, a line space of 2 to 5 points scrolling of the screen and the eyes.
18
This is more of a preference than more than font size would be perfect
a hard-and-fast rule – choose sizes for an average website. 7. Text Alignment
which work best for your content. The worst thing you could possibly
do to a web page is to justify the
content’s text alignment. For one
thing, consider the readability – will
your text be full of rivers?
Super 8. Font
There is no reason to think
that font is not that important just
Quick
because it appears late in this list; in
fact, the font is one of the important
considerations in typography. Choose
a font that appears clear in all sizes
Web Typography
and weights.
9. One Font per Sentence
If a sentence had different fonts
Tips ...for newbies
for every word, it would look like a
traveling circus and definitely irritate
the user. It is better to stick to one
font for the entire sentence or better
yet, for the whole paragraph.
Typography is an underrated topic when it comes to web design. But in a world where your website
becomes your identity, you could either choose to be the elegant, educated prince or the ignorant
pauper. And typography can make that difference. The design and the readability of your website
is completely dependent on good practice in typography. It’s not just fonts and font size, there is
much more to consider.
10. Font Size 11. Allow for Font Size 12. Quotation Marks and
The font size is another primary Increase Apostrophes
factor to be considered. While too big Scaling up the font size has proved Most people don’t realize that
a font size requires the user to keep to be a challenge for every website while typing in a word processor, it
scrolling, smaller font sizes strain because of the retention of the automatically identifies the start and
the user’s eyes. content within its given space. Plan end of a quotation and adds suitable
your layout in a way that allows symbols. HTML requires that you
font size to be increased. use “ for quotations.
13. Limit your Fonts 14. Use — instead of -- 15. Serif for Headlines and
Unless you are designing the website The use of the double hyphen can Sans Serif for the Body
for a specific font creation company, affect readability; therefore, it is Serif fonts look amazing on the
it would be wise to limit the number recommended that you use the headlines, while sans serif offer
of fonts you use to only two or three. em-dash or the en-dash instead more readability even if the font
of the double hyphen for a size is smaller – hence, they should
professional appearance. be used for the body.
16. Ellipsis 17. Shoot Properly 18. Colour
The ellipsis symbol is used to denote Bullets are one of the factors that The colour of the font is of primary
omission or continuation. In order to can improve the look of the content. significance since colours highlight the
be precise, the actual ellipsis should If the bullets are misaligned within the content. Use of contrasting colours is
be used instead of using three periods paragraph, it looks sloppy; therefore, advisable, but too many colours could
… (HTML: Special Characters). bullets have to be indented separately. ruin the effect.
