Fonts

Today, while I am waiting to update my hosting I will be looking at Fonts. One thing we owe to Steve Jobs is that we are able to express ourselves in various fonts on a computer screen. His early interest in caligraphy

From: http://www.hobo-web.co.uk/best-font-size/

UK Government recommendations on best fonts to use:

Use only clear, commonly used fonts. Avoid the use of small text. Users should have the ability to scale fonts.

Guidelines for UK Government websites
Illustrated handbook for Web management teams

Jakob Nielsen’s Readability Guidelines for Website Font Size

  • Do not use absolute font sizes in your style sheets. Code font sizes in relative terms, typically using percentages such as 120% for big text and 90% for small text.
  • Make your default font size reasonably big (at least 10 point) so that very few users have to resort to manual overrides.
  • If your site targets senior citizens, use bigger default font sizes (at least 12 point).
  • If possible, avoid text that’s embedded within a graphic, since style sheets and font size buttons don’t have any effect on graphics. If you must use pictures of text, make sure the font size is especially large (at least 12 point) and that you use high-contrast colors.
  • Consider adding a button that loads an alternate style sheet with really big font sizes if most of your site’s visitors are senior citizens or low-vision users. Few users know how to find or use the built-in font size feature in current browsers, and adding such a button within your pages will help users easily increase text size. However, because every extra feature takes away from the rest of the page, I don’t recommend such a button for mainstream websites.
  • Maximize the color contrast between the text and the background (and do not use busy or watermarked background patterns). Despite the fact that low-contrast text further reduces readability, the Web is plagued by gray text these days.’

The Font  decided to use was “collaborate regular font- 12”. The reasons were: as it was not dissimilar to “Arial” but also after reading the above articles I found it was scalable without looking odd when enlarged or decreased in size.

Advertisements

Website Colour

I found a number of excellent resources on the internet as well as graphic design journals in the AUCB library. The Pantone website has a number of interesting ideas however they are aimed more at the fashion and interior design community. (http://www.pantone.co.uk/pages/pantone/category.aspx?ca=88) for colour inspiration, guidance and choice.

Making Effective use of Colour in Websites

When discussing the design of a new site, a question that consistently arises is – “How do I select the most effective colors?” Choosing the right color palette for a site is essential to communicate your message, brand your product or service, and, if you are an online business, sell your products. Everyone has favorite colors, but how those colors are interpreted may vary from culture to culture. Color communicates far more than most people realize. Choosing wrong colors can be a disaster for your website.

Before selecting colors, we ask the following questions:

  • Who are your site’s potential visitors?
  • What are your products or services?
  • What are your site’s key objectives?

Your website’s potential visitors might come from a global or regional market, or exclusively from North America. Did you know that the color white symbolizes mourning in China, or that purple is the color of death in many Catholic countries? Yellow is an Imperial color in Chinese countries, but in America it may symbolize cowardliness or urine. More important, shifting colors to another area of the color spectrum can completely change their impact. For example, yellow shifted toward red results in a color that indicates gold or ‘having value.’

Web visitor demographics also can make a difference in how colors are perceived. Young people are drawn more to saturated colors than adults, who may find them garish or offensive. Strong color contrasts can also drive older visitors away. While young people may respond positively to new color trends, these fashionable colors can be overused and go out of style as quickly as they appear. Text and background color choices also affect readability, which can be an issue for older visitors and those with visual impairments.

The following is a list of colors and potential meanings:

  • Red: passion, romance, fire, violence, aggression. Red means stop, or signals warning or forbidden actions in many cultures.
  • Purple: creativity, mystery, (reddish purple) royalty, mysticism, rarity. Purple is associated with death in Catholic cultures, as mentioned above.
  • Blue: loyalty, security, conservatism, tranquility, coldness, sadness. Light blues create a feeling of openness, clean air and freshness, while dark blues can convey tradition, trust and solidity.
  • Green: nature, fertility, growth, envy. In North American cultures, green means ‘go,’ is associated with environmental awareness, and is often linked to fiscal matters. A lighter, somewhat desaturated green is the color of money and indicates wealth or value.
  • Yellow: brightness, illumination, illness, cowardice. Some yellows can symbolize the precious metal – gold – and are universally valued.
  • Black: power, sophistication, contemporary style, death, morbidity, evil, night.
  • White: purity, innocence, cleanliness, truth, peace, coldness, sterility. White is also the color of death in Chinese culture, as mentioned above.

Many websites today clearly reflect the negative effect of bad color choices. People often choose colors to ‘dress-up’ their site without any regard to their site’s objectives. Here are several mistakes commonly made in selecting website colors:

Colors are selected that conflict with your brand, service or products.
If you have a well-known brand like Coke, you can use bold colors like ‘Coca-Cola red’ as much as you want without concern. However, very few companies are in the unique position where the brand name is more powerful than their brand color. Less well-known businesses should carefully consider the colors they choose for their logos and website. Certain colors work well with specific types of businesses. For example, warm colors, such as reds, yellows, and oranges – often called a ‘fiesta palette,’ can work well for food sites and restaurants that offer spicy fare. Colors in the warm range can also be effective in selling products associated with sun, passion or sensuality. Creams, whites and dark brown colors can be used successfully on websites that sell chocolate products. Cool colors, such as blues and greens, complement outdoor products, airlines, medical services, law firms and intellectual content. These colors can reflect trust or a relaxed attitude. As one person has noted, “… the color blue has a relaxing effect on the nervous system, and some studies have shown that it increases productivity when used as a background color. However, don’t use blue in your color scheme if your product is food-related, as blue is a natural appetite suppressant.”

The web site uses saturated background colors that fight with your site’s content and make it difficult to read and navigate. 
If your site uses product pictures or headlines with important messages, you should always chose a desatured background so the images will ‘pop’ or ‘stand out’ on the page. A saturated background will dominate your page, causing both the content and images to be lost. Not only will your content be hard to read, your pictures will lose their effectiveness and your site will be difficult to navigate. The colors of your product pictures and key messages should always be more highly saturated than your background colors. Keep in mind that graphics and areas on your site with the most saturated colors will attract the visitor’s eye first. (ref: http://www.pallasweb.com/color.html)

After reading a number of articles and using the colour wheel from the handouts from my course tutor, my website colour choice was mostly influenced by the above information and the following websitehttp://kuler.adobe.com/#themes/rating?time=30