8 Simple Ways to Improve Typography In Your Designs

By Antonio Carusoneaisleone.net

I wrote this arti­cle for Smash­ing Mag­a­zine and it was pub­lished last Fri­day on their site. I’m re-publishing it here for your read­ing plea­sure. Enjoy.

Many peo­ple, design­ers included, think that typog­ra­phy con­sists of only select­ing a type­face, choos­ing a font size and whether it should be reg­u­lar or bold. For most peo­ple it ends there. But there is much more to achiev­ing good typog­ra­phy and it’s in the details that design­ers often neglect.

These details give the designer total con­trol, allow­ing them to cre­ate beau­ti­ful and con­sis­tent typog­ra­phy in their designs. While these details can be applied across dif­fer­ent types of media, in this arti­cles we’re going to focus on how to apply them to web design using CSS. Here are 8 sim­ple ways you can use CSS to improve your typog­ra­phy and hence the over­all usabil­ity of your designs.

Measure

Measure

The mea­sure is the length of a line of type. To a reader’s eye, long or short lines can be tir­ing and dis­tract­ing. A long mea­sure dis­rupts the rhythm because the reader has a hard time locat­ing the next line of type. The only time a nar­row mea­sure is accept­able is with a small amount of text. For opti­mum read­abil­ity you want the mea­sure to be between 40 – 80 char­ac­ters, includ­ing spaces. For a single-column design 65 char­ac­ters is con­sid­ered ideal.

A sim­ple way to cal­cu­late the mea­sure is to use Robert Bringhurst’s method which mul­ti­ples the type size by 30. So if the type size is 10px, mul­ti­ply­ing it by 30 gives you a mea­sure of 300px or around 65 char­ac­ters per line. The code would look some­thing like this:

p {
font-size: 10px;
max-width: 300px;
}

Leading

Leading

Lead­ing is the space between the lines of type in a body of copy that plays a big role in read­abil­ity. Cor­rectly spaced lines make it eas­ier for a reader to fol­low the type and improves the over­all appear­ance of the text. Lead­ing also alters typo­graphic color, which is the den­sity or tone of a composition.

Many fac­tors affect lead­ing: type­face, type size, weight, case, mea­sure, wordspac­ing, etc. The longer the mea­sure, the more lead­ing is needed. Also, the larger the type size, the less lead­ing is required. A good rule is to set the lead­ing 2-5pt larger than the type size, depend­ing on the type­face. So if you set the type at 12pt, a 15pt or 16pt lead­ing should work well on the web.

This takes some finess­ing to get the right spac­ing but here is an exam­ple of what the code would look like:

body {
font-family: Helvetica, sans-serif;
font-size: 12px;
line-height: 16px;
}

Hanging Quotes

Hanging

Hang quotes in the mar­gin of the body of text. By not doing so a quo­ta­tion mark that is flush with the text will inter­rupt the left mar­gin and dis­rupt the rhythm of the reader. Hang­ing quotes keeps the left align­ment intact and bal­anced there­fore increas­ing readability.

This is achieved very eas­ily with CSS using the block­quote element:

blockquote {
text-indent: -0.8em;
font-size: 12px;
}

The neg­a­tive indent will vary depend­ing on the type­face, type size and margins.

Vertical Rhythm

Baseline

A base­line grid is the foun­da­tion for con­sis­tent typo­graphic rhythm on a page. It allows the reader to eas­ily fol­low the flow of the text, which in turn increases read­abil­ity. A con­tin­u­ous rhythm in the ver­ti­cal space keeps all the text on a con­sis­tent grid so that pro­por­tion and bal­ance are retained through­out the page, no mat­ter the type size, lead­ing or measure.

To keep a ver­ti­cal rhythm in CSS, you want the spac­ing between ele­ments and the line-spacing (lead­ing) to equal the size of the base­line grid. For exam­ple, lets say you’re using a 15px base­line grid, mean­ing that there are 15px between each base­line. The line-spacing would be 15px and the space between each para­graph would also be 15px. Here is an example:

body {
font-family: Helvetica, sans-serif;
font-size: 12px;
line-height: 15px;
}
p {
margin-bottom: 15px;
}

This allows each para­graph ele­ment to align with the grid, keep­ing the ver­ti­cal rhythm of the text.

Widows & Orphans

Widows

A widow is a short line or sin­gle word at the end of a para­graph. An orphan is a word or short line at the begin­ning or end of a col­umn that is sep­a­rated from the rest of the para­graph. Wid­ows and Orphans cre­ate awk­ward rags, inter­rupt the reader’s eye and affect read­abil­ity. They can be avoided by adjust­ing the type size, lead­ing, mea­sure, wordspac­ing, let­terspac­ing or by enter­ing man­ual line breaks

Unfor­tu­nately, there is no easy way to pre­vent typo­graphic wid­ows and orphans with CSS. One way to remove them has been men­tioned above, but there is also a jQuery plug-in called jQWidon’t that places a non-breaking space between the last two words of an element.

Emphasis

Emphasis

Giv­ing empha­sis to a word with­out inter­rupt­ing the reader is impor­tant. Italic is widely con­sid­ered to be the ideal form of empha­sis. Some other com­mon forms of empha­sis are: bold, caps, small caps, type size, color, under­line or a dif­fer­ent type­face. No mat­ter which you choose, try to limit your­self to using only one. Com­bi­na­tions such as caps-bold-italic are dis­rup­tive and look clumsy.

Here are some dif­fer­ence ways of cre­at­ing empha­sis with CSS:

span {
font-variant: small-caps;
}
h1 {
font-style: italic;
}
h2 {
text-transform: uppercase;
}
a {
text-decoration: underline;
}

Keep in mind that the font-variant style only works if the font sup­ports the small-caps variant.

Scale

Scale

Always com­pose with a scale, whether it’s the tra­di­tional scale devel­oped in the six­teenth cen­tury that we’re all famil­iar with, or one you cre­ate on your own. A scale is impor­tant because it estab­lishes a typo­graphic hier­ar­chy that improves read­abil­ity and cre­ates har­mony and cohe­sive­ness within the text.

An exam­ple of a typo­graphic 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;
}

Clean Rags

Rag

When set­ting a block of text unjus­ti­fied with a left or right align­ment, be sure to keep the rag (the uneven side) bal­anced with­out any sud­den “holes” or awk­ward shapes. A bad rag can be unset­tling to the eye and dis­tract the reader. A good rag has a “soft” uneven­ness, with­out any lines that are too long or too short. There is no way of con­trol­ling this in CSS, so to achieve a good rag you must make man­ual adjust­ments to the block of text.

Hyphen­ation can also help with pro­duc­ing clean rags, but unfor­tu­nately CSS can’t han­dle this at the moment. Maybe in the near future we’ll see some con­trol in CSS 3. Not all is lost though. There are some server and client side solu­tions for auto hyphen­ation like phpHy­phen­ator and Hyphen­ator as well as online gen­er­a­tors.

About Bếp từ

I love VietNam

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: