Typography Part 2 - Font art and text tweaks

Published on April 13th, 2007 in Typography Tweaks, Design Tips by Wayne
Submit to:

Digg Typography Part 2 - Font art and text tweaks

Stumble Typography Part 2 - Font art and text tweaks

Reddit Typography Part 2 - Font art and text tweaks

Now that you’re familiar with fonts and its terminologies in part 1, we will be discussing how you can tweak fonts in your design using CSS and Photoshop.

Text Tweaks - The power of Em

In CSS (Cascading Style Sheets), there are a few ways that you can measure font-sizes, and other elements. The most common ways are to use pixels (px), ems and percentages.
Ems are widely used in adjusting font sizes as they work on the default size fonts of the parent elements they are used in and thus produce consistent results across many popular browsers.

Here’s how Em works on your codes:

When used in other areas, its calculations are based on the font-size property of the element. (For. e.g. if your table cell’s font size is 12 px and your line-height is 1.2em, then your line height will be 20% greater than the font size of your table cell.)

If applied to the font-size property itself, it will take reference the font size of the parent element of where your child element resides in: If i have a div tag in the “body” HTML element, the latter will be the parent element of the “div” tag.

Ems vs. Pixels (px)
Pixels measure by taking relevance to the viewing device of the user. This simply means that your text gets scaled accordingly to the size of your monitor or PDA etc. Even though it may seemed like pixels are the way to go in the world CSS tweaking, but font sizes is not possible on IE. Despite this flaw, pixels still provide a good control over your codes with its ease of use.

And the verdict?

A fair mix of Ems and px will be ideal for CSS design. However in the world of fonts, it will be better to go with Ems as they are cross browser compliant with font resizing when used properly.

Text Tweaks
Here are some tweaks that you can use to play around with. You can refer to these sites and see how the gurus do it:

1. Font-size Tweaks with Em
Suppose you have a table and a div tag in your HTML body tag. As mention from above, the body tag is the parent element of the div tag.
In order to tweak your font size using Em, you should first set the font size of your parent element, the tag as follows:

“Body {font-size:62.5%}” (ignore the ” “)

The above is assuming that all browsers have their default font size set to 16x and thus reduce it to 10px. The DIV tag element will reference the font size of the “body” element, setting 1 em to 10 px; 1.2em to 12 px and so on.

You might have to make some adjustments to your margins to prevent elements from overlapping when fonts are resized.

2. Line-height tweaks with Em
Now that your font sizes are all tweaked up, you may want to enhance your line height (or line spacing) to boost legibility. The general rule is the longer your sentences are, the more line spacing is needed.

3. Font-family
Never estrange your font types for you’d never know whether the user have it or not. If you’re using a non-standard Microsoft/Mac font type, then all the more you should include the font-family in your CSS. What’s the use of a website when one can’t read anything from it?

Font Art
Though there isn’t much you can tweak for body text, but you can go all out and unleash all your creative juices in the designing of titles and headers for your website. There isnâ€™t really any hard and fast rule, just make sure that the font and design layout is coherent with the theme that you’re trying to portray.

Here’s a few tricks that you can use to liven up your website with font art:

1. Let yourself loose and let your creativity flow! Experiment with letter spacings and breath new life into your fonts!