Above are anatomy of letters to further explain each part of letters that are not explained below.
Typography is a key aspect of design as it can either make a design or ruin one. It is an art in which language can be made visible by using various techniques and medias. Type can be arranged using different methods such as; point size, leading, kerning and tracking. Kerning is the spacing between each individual letter for example, if i had my letters apart from each other like this.. ‘r y a n’ i would have a high setting on my kerning whereas if the letters were close to one an other than you would have a low kerning setting. Leading refers to the distance between the baselines of succesive lines of type. The term ‘leading’ came about in the days of type hand-setting, where strips of lead were inserted into forms i order to increase the vertical distance between lines of type. Typography is used in professions such as; typographers, graphic designers, art directors pretty much anyone who arranges type for a product. There are two different typefaces known as a serif and a sans serif which are both used to convey different messages as well as suiting certain designs. Serif fonts as you can see have ‘serifs’ and the end of the strokes whereas sans serifs do no have these. Certain fonts are used for certain types of design for example the font Helvetica is used widely in information design unlike fonts like Times new roman which is used in articles such as the times newspaper.
Typography within web.
Typography is an important part of design. Think of all the different uses of typography on the web, from large headlines and bold blocks of text to smaller-sized text in body copy, and you’ll soon realize that it is a crucial part of a web design. Although the internet and the way we looks at the internet has and is changing rapidly the use of typography is still as important as it was in the beginning. Handling type for print has many differences to handling type for the web as there are things you need to consider such as; contrast, colour, readability, and size.
Colours on a monitor screen are created by light therefore it becomes more important to think about contrast as it is straining to look at and read text with poor contrast. white background and black text is the easiest to read because it provides the most contrast due to the colour difference. Colour theory and colour choice play an important role in web typography.With regards to serif and sans serif fonts sans serif fonts have been proven to be more easy to read with online body copy as the serifs on the typeface makes it more difficult to follow. Although sans serif fonts can work when you increase the point size and use more leading as doing this makes it easier for the viewer to read. This is another example and reason why choosing you type is vital in order to create an effective piece of design with even the smallest of detail leading to a failed piece of design. Choosing a poor font can ruin a beautiful layout and structure to a website. In addition to this serifs work good for headlines as they give a special accent to the headline and they are easier to read when used within a small amount of text. Choosing the correct point size for the type is also important as having type to large can overpower the design that is why when designing you don’t necessarily need to choose a certain font but just one that works well within the design.
Here is a screenshot of the University of Worcester homepage with the headings and subheadings using serif fonts (headlines in small amounts of text) and the sans serif being used for body copy. http://www.worcester.ac.uk/
Web safe fonts
These fonts make up a group of a select few fonts that are available on most computers.
Choosing from the web safe fonts on the list below will ensure better control over what your text looks like on all browsers and operating systems. Here are the most popular and safe fonts to use:
- Arial (Mac OS equivalent is Helvetica)
- Times New Roman (Mac OS equivalent is Times)
- Verdana
- Georgia
- Courier
Other popular fonts:
- Impact
- Lucida Console (Mac OS equivalent is Monaco)
- Lucida Sans (Mac OS equivalent is Lucida Grande)
- Palatino
- Tahoma (Mac OS equivalent is Geneva)
- Comic Sans
- Trebuchet MS
When using any of these fonts it would be a safe idea to have a option to fall back on in your CSS just in case the font doesnt work.
What not to do.
Selecting fonts that are too much alike is not a good decision to make, and should be avoided by closely looking at the style of fonts and the design of the site to choose something that is appropriate. Most serif headings pair well with sans serif fonts for body text. Pairing two sans serif fonts is a bit trickier but is certainly a viable option. Maybe if you were to use two sans serif fonts you could use a bolder font for heading and a lighter font for the body text to show the seperation.
While researching this topic i learnt a lot about how important choice, colour and layout of text is and how not getting your typography right can lead to a piece of design that simply doesnt work. I hope this blog has helped you consider your options when designing type layout for the web!
http://www.1stwebdesigner.com/inspiration/typography-inspiration/ – Here is a link to gain inspiration into good typography within web design, it shows 40 different types of good typography on a range of different designs.
http://www.google.co.uk/imgres?q=anatomy+of+type&um=1&hl=en&sa=N&noj=1&tbm=isch&tbnid=4AnEyNIbDHf7rM:&imgrefurl=http://www.planetoftunes.com/dtp/typography.htm&docid=1Sp1wJNLX_BtUM&imgurl=http://www.planetoftunes.com/dtp/dtp_media/fonts_typography/anatomy.gif&w=644&h=428&ei=267BTrCqIMqYhQeM-bmkBA&zoom=1&biw=1440&bih=670 – Letter anatomy image
ryanbroome 
