simple ways to improve typography in your web design
TRANSCRIPT
Simple Ways to Improve Typography in Your Web
Design
When we talk about typography, many people including designers think
that it consists of only choosing a typeface and font size which fit to the
theme of a particular project. But there is much more in the room to
achieving a good typography.
Web designers often neglect the important details while choosing a
typography for their project. These details give the designer total
control, allowing them to create beautiful and consistent typography in
web designs.
In This article, you will focus on how to apply these fonts to web design
using CSS and improve your typography the way you use them in your
design projects. Let’s get started!
Measure
The measure is the length of a line of type. Long or short lines can
distract reader’s mind a lot. For optimum readability you want the
measure to be between 40-80 characters, including spaces.
A simple way to calculate the measure is to use Robert Bringhurst’s
method
p {
font-size: 10px;
max-width: 300px;
}
Leading
Leading is the space between the lines in a body of copy that plays a big
role in readability. It improves the overall appearance of the text. A good
rule is to set the leading 2-5pt larger than the type size
To get the right spacing
body {
font-family: Helvetica, sans-serif;
font-size: 12px;
line-height: 16px;
}
Hanging Quotes
Hang quotes in the margin of the body of text. Hanging quotes keeps the
left alignment intact and balanced hence improving readability.
This can be achieved very easily with CSS using the blockquote element:
blockquote {
text-indent: -0.8em;
font-size: 12px;
}
Vertical Rhythm
A continuous rhythm in the vertical space which keeps all the text on a
consistent grid .To keep a vertical rhythm in CSS, spacing must be equal
the size of the baseline grid.
body {
font-family: Helvetica, sans-serif;
font-size: 12px;
line-height: 15px;
}
p {
margin-bottom: 15px;
}
Widows and Orphans
A widow is a short line or single word at the end of a paragraph. It can
disturb the reading experience, avoided by adjusting the type size,
leading, measure, wordspacing, and letterspacing.
Emphasis
Emphasize a word without interrupting the reader. Italic is widely
considered to be the ideal form of emphasis.
Scale
A scale establishes a typographic hierarchy.
An example of a typographic scale defined in CSS:
h1 {
font-size: 48px;
}
h2 {
font-size: 36px;
}
h3 {
font-size: 24px;
}
h4 {
font-size: 21px;
}
h5 {
font-size: 18px;
}
h6 {
font-size: 16px;
}
p {
font-size: 14px;
}
We are done here! Hope the article will help you to improve your
typography skills and the overall usability of your web design.
iMediaDesigns is an toronto web development and Online
Marketing agency for B2B and B2C clients in the luxury, fashion,
lifestyle and retail industries.