Search

Technique Gallery - Text Styles

In the last few years the way we work with Fonts has changed. This revolution can seem frustrating at first but once you 'get it' the practice if Text Styles is very cool. Let's take a quick look at why:

Consistancy

For ages graphic designers have realised that consistancy is a form of neatness and that if you can build a document, presentaton, book, or web site with pre-defined styles the process of remembering which font at which size and the inevitable 'getting it wrong' is removed. Most of you have probably seen a web site that looks a bit like:

Ozzey Product Makers

Hello and welcome to our web site. We are really great people and have been doing this for ages. Can we have your money please?

After a few lines of this sort of stuff you just want to kill yourself. Reading something so varied is just too hard. For some reason people who compose like this think something like:

  • Oh it is important that I welcome people, that better be bold
  • It is vital that people know that we are great people so that has to be red
  • We have been doing it for ages and if people are going to want to give us money they need to know that. I have already made something bold and something else red and this isn't quite like that so I'll make it green and underlining will make it stand out more
  • I read that you should always ask for someone's business so I'm doing that but I don't want people to feel threatened so I'll make it a calming blue. I better make it italics so it feels like an action thing and the underlining because this is really important that they do this...

Following a Style Sheet that defines how things should be handled stops this (that and learning to write).

Fonts

The web only has 5 fonts that are safe to use - that are in every person's operating system whether they are on Windows or a Mac. The 5 safe web fonts are Ariel, Tahoma, Verdana, Trebuchet and Georgia. Technically it is possible to use another font but I think why bother as chances are users won't see it anyway and unless you define 'back up' fonts well you may just be showing them Times New Roman! While people get tempted to worry a lot, the shape of a font is far less important than the way it is used. I will bet that you have never put down a book because you didn't like the font it was printed in. Maybe because it was too small but not because it was printed in the dreaded Times New Roman.

Behaviour

As I suggested above the font is less important than how it is handled - and of course the story the words tell. The style calls a Font and a collection of behaviours like colour, justification, boldness and spacing. These complete the process of bundling up a font with the rules of how it displays.

Useability

Text styles make choosing the right text behaviour very simple but there is also another really cool thing that they do. Once assigned to some text if the style is changed then any text with that style assigned will automatically change behavour. This is superb for when you decide to revamp parts of your site. If your new look calls for body text to be Trebuchet at 12 pt in Grey when you had Ariel at 10 pt in Black then the change will ripple through your whole site saving you from having to go do all that hard work yourself. That is cool.

Text Styles in iSmart Create

Text Styles in Action

When we build a Template for you we define 4-5 styles that will cover all your basic needs. We set these so you can't accidentally damage them. We also set link styles so you don't have to worry about playing with them.

To assign a style to some text in a paragraph simply select a word in the paragraph and choose the appropriate style from the drop down. If you really need another style then hit the "TT" button and follow the prompts. Just be sure to name the style sensibly as you need to find it later and make sense of when to use it.

Please try not to have 78 different styles in there as that is entirely missing the point and will make it very hard to remember what is for what. Even more so if someone else has to work on your site too.

A Style Set:

Main Heading

Sub Heading

Body Text

You will see that text styles always need a Return between them and that return automatically places an extra space between the lines. This is not a result of Styles but of the P-Tag in HTML which automatically puts in an extra return. This is great most of the time but occasionally can get in the way of formatting. There are two solutions:

1. if your next line should be in the same style, say an address block, then use a soft return which is accessed by hitting Shift+Enter
1a. see I just did it
2. if your next line requires a different text style then you need to choose another method. One is to put the first style into an image (be sure to use the Alt Text so you don't lose valueable SEO) followed by a soft return then use the 2nd style. The better method is to use Tables which allow you to keep easy control of everything. Let me show you:

Using the Return Using Tables

Main Heading

Really exciting text about cool stuff.

Main Heading

Really exciting text about cool stuff.

or if I show you the Table

Main Heading

Really exciting text about cool stuff.

In the main example (above right) I defined the Table to 100% Width and then set the Cell Spacing and Cell Padding to 0 to stop the text from being out of line with other non-tabulated text. I set no borders or colours so the table stays invisible. The table is only there to control things. Where I show you the table I have put in cell spacing and padding as well as colours.

So by now you should see that Fonts are a thing of the past and that in living, changing documents Styles are the way to go. After all it is not what you use but how you use it that impresses people.

If you have any questions or want some assistance with creating something like this for yourself please don't hesitate to contact one of us here at iSmart.

iSmart Software

Australia - United Kingdom - Ireland @ iSmartsoftware 2009. All rights reseverd.

Web design and content management software / web builder by iSmart Software Australia, United Kingdom and Ireland

xml

RSS : Real Simple Syndication