This link has been bookmarked by 289 people . It was first bookmarked on 07 Apr 2009, by Ognyan Kulev.
-
06 Dec 11
-
27 Sep 11
-
05 Sep 11
Mike taylor8 Simple Ways to Improve Typography In Your Designs http://ow.ly/6kZIS << very nice article. #Typography is so important in your...
-
22 Aug 11
-
01 Mar 11
-
14 Feb 11
-
30 Dec 10
-
25 Nov 10
-
The only time a narrow measure is acceptable is with a small amount of text. For optimum readability you want the measure to be between 40 – 80 characters, including spaces. For a single-column design 65 characters is considered ideal.
A simple way to calculate the measure is to use Robert Bringhurst’s method which multiples the type size by 30. So if the type size is 10px, multiplying it by 30 gives you a measure of 300px or around 65 characters per line. The code would look something like this:
-
Leading
Leading is the space between the lines of type in a body of copy that plays a big role in readability. Correctly spaced lines make it easier for a reader to follow the type and improves the overall appearance of the text. Leading also alters typographic color, which is the density or tone of a composition.
Many factors affect leading: typeface, type size, weight, case, measure, wordspacing, etc. The longer the measure, the more leading is needed. Also, the larger the type size, the less leading is required. A good rule is to set the leading 2-5pt larger than the type size, depending on the typeface. So if you set the type at 12pt, a 15pt or 16pt leading should work well on the web.
-
Widows & Orphans
A widow is a short line or single word at the end of a paragraph. An orphan is a word or short line at the beginning or end of a column that is separated from the rest of the paragraph. Widows and Orphans create awkward rags, interrupt the reader’s eye and affect readability. They can be avoided by adjusting the type size, leading, measure, wordspacing, letterspacing or by entering manual line breaks
Unfortunately, there is no easy way to prevent typographic widows and orphans with CSS. One way to remove them has been mentioned 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.
-
Scale
Always compose with a scale, whether it’s the traditional scale developed in the sixteenth century that we’re all familiar with, or one you create on your own. A scale is important because it establishes a typographic hierarchy that improves readability and creates harmony and cohesiveness within the text
-
Clean Rags
When setting a block of text unjustified with a left or right alignment, be sure to keep the rag (the uneven side) balanced without any sudden “holes” or awkward shapes. A bad rag can be unsettling to the eye and distract the reader. A good rag has a “soft” unevenness, without any lines that are too long or too short. There is no way of controlling this in CSS, so to achieve a good rag you must make manual adjustments to the block of text.
Hyphenation can also help with producing clean rags, but unfortunately CSS can’t handle this at the moment. Maybe in the near future we’ll see some control in CSS 3. Not all is lost though. There are some server and client side solutions for auto hyphenation like phpHyphenator and Hyphenator as well as online generators
-
-
-
-
14 Nov 10
-
18 Oct 10
-
05 Oct 10
-
08 Sep 10
-
24 Jul 10
-
13 Jul 10
-
21 Jun 10
-
16 May 10
-
14 May 10
-
01 May 10
Fictrix .8 simple ways to use CSS to improve the typography of a website, and hence the overall usability of the design.
css list typography article usability magnolia import web design delicious import
-
22 Apr 10
-
06 Apr 10
-
26 Mar 10
-
20 Mar 10
-
06 Feb 10
-
20 Jan 10
-
14 Jan 10
-
12 Jan 10
-
08 Jan 10
-
06 Jan 10
-
-
05 Jan 10
-
02 Jan 10
tarkowskiHere are 8 simple ways you can use CSS to improve your typography and hence the overall usability of your designs.
-
07 Dec 09
-
15 Nov 09
-
13 Nov 09
-
12 Nov 09
-
04 Nov 09
-
02 Nov 09
Oliver MayorSome basic tips on Measure, Leading, Hanging Quotes, Vertical Rhythm, Widows/Orphans, Emphasis, Scale, and Rags, with sample CSS and some good links.
-
01 Nov 09
-
ebiatawodiGreat quick overview of typography dos and don'ts
typography tutorial tips resource design for:justinanzete delicious
-
28 Oct 09
-
19 Oct 09
-
09 Oct 09
-
08 Oct 09
Michael M Grant8 easy ways to improve type in your designs. For web, print, or CBT.
-
29 Sep 09
-
27 Sep 09
-
nchenga nchengauseful
-
12 Sep 09
-
02 Sep 09
-
01 Sep 09
-
26 Aug 09
-
23 Aug 09
-
16 Aug 09
-
30 Jul 09
-
25 Jul 09
-
24 Jul 09
-
22 Jul 09
-
21 Jul 09
-
18 Jul 09
-
07 Jul 09
-
04 Jul 09
-
02 Jul 09
-
28 Jun 09
-
25 Jun 09
-
12 Jun 09
Cristhian SMany people, designers included, think that typography consists of only selecting a typeface, choosing a font size and whether it should be regular or bold. For most people it ends there. But there is much more to achieving good typography and it’s in the
-
10 Jun 09
-
08 Jun 09
-
06 Jun 09
-
02 Jun 09
-
01 Jun 09
politvsMany people, designers included, think that typography consists of only selecting a typeface, choosing a font size and whether it should be regular or bold. For most people it ends there. But there is much more to achieving good typography and it’s in the
blogs disenho webdesign html tutorial css tipografia web howto
-
31 May 09
-
28 May 09
p bernatRègles de typographie et application via css, notion de rythme vertical (exemples) et liens vers des systèmes de calcul.
-
24 May 09
-
23 May 09
-
18 May 09
-
15 May 09
-
14 May 09
-
12 May 09
-
09 May 09
-
08 May 09
-
06 May 09
-
04 May 09
-
03 May 09
Brian HartwellA nice guide for improving typography in web design
-
01 May 09
-
29 Apr 09
-
28 Apr 09
Would you like to comment?
Join Diigo for a free account, or sign in if you are already a member.