Experiments in typography & CSS

Over the weekend I did some experiments with CSS and typography, results at my about page with containers and variable CSS for each column.

Second experiment can be seen at my solutions page, also with containers and variable CSS for each column.

And the third example is the news page with more variables for the fonts as well as for the columns displayed, accomplished with custom loops, a built in rss source (WordPress) and the flickr gallery.

Arthouse posts

Titles & works by Saul Bass

Le Grand Bleu The Big blue

007 James Bond

Typography Tips

* Determine the image you want to project with your publication and choose fonts with personalities that will fit that image.
* Limit the number of typefaces you use in a publication. Many experts say to use a limit of two typefaces, but occasionally this will vary. Too many typefaces can create an unprofessional, jumbled image.
* Look at various publications for ideas about which typefaces work well together and the images they project.
typography
* When using two typefaces, make sure they are very different. One typeface will probably be used for display type, such as headings, and the other for text. Strive for definite contrast between the two.
* When choosing only one typeface family, choose one with a lot of variations, so you will have some flexibility with your text design. The typeface Helvetica has many variations such as Helvetica Bold, Light, Regular, Condensed or Narrow, Outline, and Black.
* If you are unsure about which typeface to select, choose a common and reliable one such as Garamond, Palatino, Helvetica, Goudy, or Times Roman.
* When using a display type that has very strong characters (type that is bigger and bolder than regular type), use a typeface for text that looks more neutral. Very elaborate typefaces can be hard to read. Limit their use to only a few words and make sure the words are legible.
* All caps are harder to read than upper and lower case letters. Try to limit the use of all caps to two or three words. Some typefaces, such as Old English, are not designed to be used for all caps.
* Use bold and italic type for just a few words.
* Avoid setting large blocks of text in bold or italic type. Both styles are generally more difficult to read than regular type. A block of bold type tends to darken a page.
typography
* Typeface weight will have a large impact on the color or darkness of your page. Thin lines will create a light and airy appearance, while thick lines will create a dark and heavy appearance. Weight can be very important to the image of a publication.
* Different typefaces take up different amounts of space. Some fonts are larger and take up more space per letter. This can greatly affect the length of a publication.
* The reader’s eye is attracted by white space. It gives the eye a rest and calls attention to what it surrounds.
* Break multi-line headings by phrase (where a spoken pause would occur). Place more white space above heading than below. This signals the reader that the heading goes with the text below it.
* Increase the spacing between lines or leading to create a lighter-looking page.



Experiments in typography & CSS

Experiments in typography & CSS