spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / programming / typography / 1 To page 1To page 2To page 3current page
[previous]

Sr Instructional Designer D2L-Moodle,Clearance
WSI Nationwide, Inc.
US-NJ-Fort Monmouth

Justtechjobs.com Post A Job | Post A Resume
Developer News
News Flash: Adobe Has iPhone Workaround
Adobe's Flash 10.1 Goes Mobile (Minus iPhone)
A Salute to Visionary CEOs


The Non-Designer’s Web Book, Third Edition

CSS syntax Style sheets are made of rules. The code below is a css rule that tells a browser that any text contained within <H1></H1> tags should be colored purple.

A css rule is made up of a selector and a declaration.

The selector of a rule is the HTML tag that will be affected by the style rules. In this example, the selector is an html tag that defines the appearance of a heading (on the previous page, the selector was the assigned name of a style). Any html tag can be a selector—B (bold), P (paragraph content), table (table content).

The declaration of a rule is the code that defines what the style will be. The declaration in the example below is { color: purple }. The first part of the declaration is is the property, and the second part is the value.

CSS and browser compatibility

css is a great way to control the typography in your web sites. Unfortunately, web browsers have been very inconsistent, sloppy, and downright terrible in their support of official css standardized code. Various browsers display the same code in different ways or sometimes just ignore the css instructions, which often results in displaying unpredictable and incorrect versions of a web page.

However, the basic css typographic controls seem to work well in all of the most popular browsers, so plan to create style sheets that specify a font or font family, font style (normal, italic, or oblique), line height (the horizontal space between lines), weight (normal or bold), and font color. These are the same attributes that are provided in the Dreamweaver Style Definition window, shown on the opposite page.

Attach a style sheet

Writing css code to attach a style sheet to an html document is pretty easy (see the previous page), but it’s even easier when you use a web-authoring software program. In Dreamweaver it’s as easy as clicking a button (below), then selecting an HTML file to attach to.

You can manually attach a style sheet to a web page. Make sure you name the style sheet with an extension of .css (workshop.css, for example).

  • 1. Put the style sheet file (it’s just an ordinary text file) in the same folder with your web pages.

  • 2. Open the source code of the web page to which you want to attach the style sheet.

  • 3. Within the “head” tag of the html code, type the line of code shown in bold below:

The LINK REL line of code instructs the browser to look for a style sheet named “workshop.css.”

With new thoughts in your mind, take a closer look at typography on the web:

  • Find a page where the text bumps up against the left edge. Do you find your eye bumping into that edge every time you go back to the next sentence?

  • Find a page that is set in all caps. Read it, pretending you didn't notice it was all caps. Did you read all the way through? Or did something make you not continue? Did you notice how you have to work harder to read lots of all-cap text?

  • Experiment with the default font in your browser. Find a font and size you feel most comfortable with.

  • With your default set, keep an eye out for a page where the designer has specified the font to be smaller than your default. What do you think?

  • Find the button or the menu command in your browser that lets you enlarge or reduce the size of the type on the screen. How does it affect the carefully designed layouts of web pages? Remember, this will happen to your pages as well!

  • Change the resolution on your monitor and notice how it affects the size of the type on web pages. Remember, many people have their monitors set at a higher resolution so they can see more on the screen (but everything looks smaller) or a lower resolution so everything looks bigger (but they see less at one time).

  • Keep an eye open for a web site where you think the designer has broken the standard rules of typography, yet the site "works" - it's clear, you know what is going on, the typographic contrasts help structure the hierarchy of information, you can read it, it even looks good.

  • Put two things into words: 1) What "rules" were broken, and 2) Exactly what is it that makes the typography still work? Is it the spacing? Line lengths? Size? Composition, or control of how your eye flows through the design from one important element to another? Typeface design? If you can put it into words, you gain the power to incorporate the discoveries into your own work.

Decide whether the concept suggested below should never be applied, or can perhaps be applied sometimes. “Never” means just that—it is not an option. “Sometimes” means you can sometimes get away with it, but you must be conscious; you’ll probably have to compensate for the technique in some way, but the design effect can be worth it. If you choose “Sometimes,” explain what you would do to make the suggested effect most readable or legible.

Excerpted from The Non-Designer’s Web Book, Third Edition by Robin Williams and John Tollett. ISBN 0321303377, Copyright © 2006. Used with the permission of Pearson Education, Inc. and Peachpit.

home / programming / typography / 1 To page 1To page 2To page 3current page
[previous]

internet.commediabistro.comJusttechjobs.comGraphics.com

Search:

WebMediaBrands Corporate Info

Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs

webref The latest from WebReference.com Browse >
Building a Banking Application Home Page with OOP · Mixing Scripting Languages · Review: phpFox, a Social Networking CMS with all the Bells and Whistles
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Enterprise 2.0: Social Networking in the Cloud · BroadSoft Marketplace Hastens Pace of Telephony Innovation · Review: HTC Hero for Sprint

Created: March 27, 2003
Revised: December 5, 2005

URL: http://webreference.com/programming/typography/1