IAC logo

The world of non-commercial film and A-V

Events Diary Search
The Film and Video Institute find us on facebook Join us on Facebook

 

Layout Fonts

Fonts and styles

One of the biggest faults I found with many of the club sites was lack of consistency. For example on the worst sites when it came to text there was an almost random allocation of colours, fonts both type and size both within a single page and between the various pages.

Any properly laid out document (printed or on the web) attempts to have a set of simple rules to make it clear and easy on the eye of the reader. Your reader has absorbed these rules over many years of reading newspapers, magazines, and now websites and whilst you may not realise it if you break the rules the reader feels that something is not quite right.

An example of what I mean is that for example the body text is always the same combination of attributes (font, colour, size etc.) on all the pages of the site so it always looks the same.

The good news is that the need to be consistent with fonts and colours has been recognised as a requirement by web tools designers and they came up with a simple tool called CSS.

In practice, the 4/5 different situations which you make consistent on your web pages might be as follows:

  • Body text - what you write most of the text in
  • Paragraph headings- the text above each slab of body text
  • Main headings - the text usually at the top of the page or above major sections
  • Footnote text - smaller that body text for 'footnotes, copyright notes etc
  • Splash Text - to attract attention for something out of the ordinary/latest news etc.

The way it works is very simple - here is an example:

You have decided to specify that the Body text is always 'font - Verdena, size = 10, colour = dark blue' where as Paragraph headings are always 'font Arial, bold, size 13 in medium blue' and so on.

Thus, every page follows the same convention and consequentially looks neat and professional.

Choosing Fonts

So you have the tools to help you be consistent but what font should you choose. Fonts used to be an esoteric subject only known about by the small community of typographers. Now we all seem to know tens of thousands of them. However, with a website, whilst you can set any font you like what people actually see depends on what fonts are loaded on to their PC.

I discovered this as I wanted to use Broadway BT on our site but it would not display in the browser and we ended up as Arial which is nothing like it.

It is generally accepted that you should use a safe list, as the following fonts will be found on virtually all computers:

Examples of basic fonts.

If you want to use anything else, you can write out what you want in Word and then Frame grab it as an image and use that image instead.

Of course, fonts have a very definite purpose - they do communicate a style - they do say something about your website and the organisation it represents. Even with this limited choice, there is a world of difference in say using

sample fonts

Times Roman is of course elegant but it does look a bit traditional on the other hand Comic Sans looks a bit quirky and Courier (unless you are trying replicate an old typewriter) just looks boring.

sample fonts

These may look impactful but should be used sparingly as otherwise they just look both heavy and OTT.

Fonts can be divided into Serif and Sans Serif. Serif fonts (like Times Roman or Courier) have small strokes or lines that extend from the ends of letters and symbols. They can look like small feet, caps, tails, flags or dots. Because the lines make each character more distinct, serif text is easier to read. Serif fonts have been used for centuries in printed books, magazines, and newspapers.

Sans serif fonts (like Arial or Verdana) are simple and straightforward, and lack the "lines" of the serif fonts. Because the individual characters of sans serif fonts are less distinct, they are harder to read. A lack of individual detail also gives them less personality. These fonts are typically used for newspaper headlines, photo captions and technical documents. Because computer screen resolutions vary, serif fonts can look blurred on many computers. The simplicity of sans serif fonts makes them easier to read on computers. They are the preferred choice for web site and PowerPoint presentations.

To read more see www.pallasweb.com/fonts.html

An image of letters scattered on a page by 'bigevil600 ' from stock.xchng

The Weebly Way

Changing fonts and colours in Weebly

Weebly offers a way  for absolute beginners to create good websites
easily and without cost. Our series on how to use it begins here.

Using logos

You could of course produce a completely anonymous website with just words may be some slabs of colour here and there and the name of the club written in 'characterless Arial' . But you want to inject some distinctiveness into the site..

To help do this your website should include a banner or logo to identify or brand your club. The aim of this is to make your website distinctive. This is important because like it or not people these days are influenced albeit in a subtle fashion by how things look and this includes websites. In my trawl around the IAC sites it was quite clear that this idea has been absorbed by some clubs but not necessarily executed very well and in some cases was almost certainly counter productive.

1. There is no need to have a fancy logo involving a complex design with stylised film cameras or film or crossed tripods rampant or whatever ...

For example the logo for Darlington Camera club with a slightly unusual font in varying levels of grey looks professional and is backed up with a simple and attractive motto. It is simple and clear.

Darlington Camera Club logo.

On the other hand I A fuzzy logo.found more than one club with a design like this. Can you guess why  I do not like it - it is I think an old cine camera and if that was not inappropriate enough (how many people will realise what it is or see any relevance in 2010) it is also faint and fuzzy.

2. Less is more, for example you do not need both the name of the club and the club in initials. Nor do you need pictures of camcorders/tripods/clapper boards and film strips all stuck together in an unholy tangle
3. I am all in favour of consistency over time as well but there are limits - for example it used to be popular in the very early days of film clubs to have a kind of design which looked like something you'd find in a heraldry guide - usually a shield with some form of motto underneath - like a minor public school. Think about what kind of impression this gives to any potential members ( at least any one under the age of 65)
4. It is also very tempting (not to say extremely uninspired) to have a picture of a camcorder - the problem is that designs and shapes of camcorders are always changing so you will still look out of date. Symbolic generic representations can work but more often than not just look odd. Also if you have a really expensive camcorder it will put people off and if it is too simple it looks a bit amateurish
5. Don't be obscure, you are not the BBC and so HGMC or whatever rendered as a logo looks both boring and baffling
6. Keep it small and neat, big is not better it is crude...
7. Don't be bland - I have come across some sites which appear to have been taken from pre-packaged template with just blocks of slightly different colours and the name written in Arial on top of one of these blocks - boring, boring and utterly uninpressive. Don't forget we deal in visual commuication!
8. If you do not have a club logo, or on reflection yours is not that good, then you may have to come up with a new design. This is where the website can lead the way and you can take the new idea and include it everywhere- on leaflets, posters even on the front of films. If this is the case then build in some flexiblity how does it look in different sizes, in colour or monochrome, in different applications - on the big screen (the credits/titles of your latest club film and in which case can it be animated), tee shirts, a 'business card', a letter head etc.
9. If you are stuck for anything else use a local landmark to identify your location  (see our example) and if you are still stuck have a look at the IAC club list of websites and see how you feel about what other clubs do. Imitation is the sincerest form of flattery but do ask before copying someone else's image, even if you plan to adapt it.
10. If you are looking for ideas it should reflect what kind of club you are :
  • Traditional with a long history
  • Modern with roots in technology
  • Local with connections with the local community or other local clubs
  • Ambitious to make sub-Hollywood blockbusters
  • etc.
11. And finally do not have an animated logo which spins round, crawls across the screen, changes colour etc. it is incredibly annoying for the poor viewer - unless of course you want them to spend only 3 seconds per page before clicking away for good.
Using the logo on your site offers all kinds of opportunities to be creative in the website context - for example, maybe the logo should always be a hyperlink, which takes you back to the home page. The logo should be an integral part of the site design so that it is always in the same place with every page thus acting as a unifying link across all the pages.
Right arrow. Go to Layout Principles Right arrow. Go to Layout Schemes

Website Makeover Guides - Introduction

What Should the Content Be? | Navigation | Planning Navigation | Anchors & Links | Words | Getting Pictures | Getting & Using Pictures
Processing Pictures | Video | Presentation Pictures | Colours | Layout Principles | Layout Schemes | Fonts | What is SEO?
Search Engine Factors | Check Your Search Ranking | Stay Legal | Website Health Check | Website No Goes more to come ...

A Beginner's Guide to Creating a Club Website with Weebly

Don't Panic! | Signing up to Weebly | Making your first (elegant) page | Adding more pages and navigation
Adding pictures and words | Creating a complex Coming Soon Page | Adding Forms, Emails, Maps and Videos.

IAC Competition to find the Best Club Website 2011


Share your passions.

Audience silhouette.

Share your stories.

Page updated on 19 January 2011
Contact Webmaster
find us on facebook Join us on Facebook
Bookmark and Share
UNICA information UNICA member
Company Limited by Guarantee No. 00269085. Registered Charity No. 260467. Authors' views are not necessarily those of the Institute of Amateur Cinematographers. Website hosted by Merula. JavaScripts by JavaScript Source. Menu by Live Web Institute. Art work by Tony Kendle.