Dec 11
Typographic Contrast and Flow
As you have probably know, most online readers don’t read line by line, instead they scan (from one point to another). For this reason, designers create typographic contrast and flow by emphasizing certain text. Contrast is important because not all the content within a page have the same value, some have greater significance than the others. By creating contrast, you can direct the reader’s attention to the important messages and at the same time enhance the visual appearance. Here are seven basic methods on how you can create typographic contrast.
1. Size
Larger font size indicate higher priority because it draws reader’s attention, therefore this method is commonly applied on headings.
On the other hand, you can de-emphasize by using smaller font size.
2. Typeface / Classification
Contrast can be achieved by mixing different typeface classifications. However, due to limited web safe fonts, there are only two main classifications commonly used: serif and sans-serif.
Generally, to create a contrast between the headings and the body text, we use serif font for the headings and sans-serif font for the body, or vice versa.
If you want to go beyond the web safe fonts, there are two more options:
-
CSS image replacement, that is to use CSS to hide the text and replace with a background image.
[css + bg image = static graphic img] -
sIFR (Flash replacement), that is to use Javascript and Flash technology to replace the text with the embedded font.
[Javascript+Flash = any font dynamically]
Note: CSS image replacement or sIFR is not practical for long paragraph, so they are normally used for headings.
3. Color
Color contrast is a common way to distinguish between navigation, headings, link, and body text.
You can use faded color to indicate something that is disabled or not available.
Sometime you don’t need to make something bigger to get more attention, you can create emphasis by using brighter color, such as red.
You can also use color to distinguish individual word within a group of text.
When small font size combined with lighter tone color, the importance of the text is further de-emphasized.
4. Cases
When the same typeface is used for the headings and body text, contrast can be established by changing the case. Uppercase tends to get more attention than lowercase, therefore it is more suitable for headings. The CSS property to transform text to uppercase is text-transform: uppercase.
Tips: avoid using uppercase in the body text or in long sentence because it will reduce readability.
5. Style and Decoration
One of the common mistakes made by most editors (particularly the Microsoft Word users), is the tendency to use the underline decoration to emphasize certain text. This is a big mistake in web typography. Readers will misinterpret the underlined text as a link because the browser underlines the link by default. So, do not underline any text that is not a link when posting on the web.
Instead, you can use italic font style.
6. Weight
Making certain text heavier weight (bold) can also create emphasis.
Another common mistake is that people tend to bold the entire line of text. By doing so, the emphasis/contrast of the text is lost.
7. Space
Space plays the most important part in maintaining flow of your design. Good use of space will tell the reader where to start, when to pause, where it ends, and what to do next.
There are various ways to create space:
- Block break (
paddingormargin) is the space in between the block elements. - Paragraph break (
paddingormargin) is the space created after the<p>element. - Tracking (
letter-spacing) is the space in between the characters. - Leading (
line-height) is the space in between the lines. - Indentation (
paddingormargin) is commonly used for blockquote and list elements.
Conclusion
Let’s put all these methods together in practice.
External Links:
- The Elements of Typographic Style Applied on the Web
- An introduction to font families
- Web Style Guide: Typography
- A List Apart
- Elegant Web Typography by Jeff Croft (PDF)
- Five steps to better typography by Mark Boulton
- Typographic Contrast and the web
CSS: The All-Expandable Box Review: TxEff Flash Component
Comments
Pages: 15 14 13 12 11 10 9 8 7 6 5 … 1 » Show All
There are 148 comments (+Add)
Pages: 15 14 13 12 11 10 9 8 7 6 5 … 1 » Show All
Loading ...
148 Cöp Konteyner http://www.dehacopkonteyner.com
August 28th, 2010 at 8:53 am
I always follow your site thank you
147 Buz http://www.isbet.com.tr/
August 23rd, 2010 at 7:09 am
admin thanks for this website.
146 Haliyikama http://www.billurhaliyikama.com/
August 21st, 2010 at 8:43 am
good site
145 sanjay http://teachsanjay.coolpage.biz/
June 23rd, 2010 at 3:09 am
nice tut! im a newbie and this opens my mind about typography..i will put you on my tutorial page in my website, hope that’s ok? thanks again!
144 kl pontz http://kevinrocci.com
June 18th, 2010 at 4:15 am
This was a great post! Being newbie, it’s great to find a resources that outlines the fundamentals.
143 sangeeta
June 15th, 2010 at 5:10 am
Very nice article…I have one question.
What is that method called where colour or font style is used to break one word into two…
for example…
if the word “Example” is written… then the words ‘AMPLE’ within it, will be written in a different colour or font…. so that the person reads both…. and to make user read it as “Ample Example” the size of “Ample” would be bigger than the rest of the letter i.e. e and x, in this case….
Does anybody know it?
142 PhoneCurry http://www.phonecurry.com
May 28th, 2010 at 7:01 am
Very nice article.
Will use these tips in my own startup website (www.phonecurry.com) - it currently has good functionality but lacks seriously in design. I am therefore trying to learn good design practices online and your site has been very useful.
Thanks!
141 sivaranjan http://www.cssfind.com
May 19th, 2010 at 8:55 pm
Your website is incredibly beautiful and useful. I have taken liberty to add this article to my CSS aggregator site. I hope you wont mind that.
140 Web Design http://exmmedia.com
April 28th, 2010 at 8:36 pm
amazing article. thanks so much for sharing!!
139 Active Computech http://www.activecomputech.com
April 12th, 2010 at 9:35 pm
It really explores the anatomy of typography explicitly..! Regards…
http://www.scalablevectorgraphics.info