Typography – Graphics and Web

Standard

Typography

There are 2 main classifications of typeface:

Serif and Sans Serif.

Traditionally, letters had a degree of ‘ornament’ at the edges of the letters. This is called a serif; hence serif fonts.

By contrast, fonts without serifs are called Sans Serif.

Here is an example:


A serif font tends to have a more traditional look, whilst sans-serif is usually considered more modern-looking, but it varies from font to font.

Readability is an important issue in web design and serif fonts have traditionally been considered easier to read. This is why serifs were created in the first place – to lead the eye from one letter to the next.

However, resent research has indicated that people with reading difficulties such as dyslexia often find sans-serif fonts easier to read.

X-Height

The x-height is, literally the height of the x in a given font. It determines the overall height of the bulk of all the letters and has a pivotal role in the readability of a font. X-heights vary considerably from font to font  and so it is important to ensure that a sufficient sized font is used when writing a website. (Usually point 16 is used, but sometimes this might need to be altered.)

Headings

A Heading will need a larger and bolder typeface in order to stand out on the page or screen.

This does not have to be the same font as the main body text, but instead can be a more interesting or creative font, as only a small amount is required.

 

Type Style

Web designers use Type Styles to create a synergy on the site. A family of fonts can be used to make the overall site look cohesive.

Another function of a type style is in writing the CSS sheet (the overall style of the pages) a ‘font family’ can be chosen. This way, if a computer does not have the desired font installed, the next on the list (a similar, related font) may be selected, so that the site still looks much as it has been designed. This is called a Web Stack.

There are some websites which enable developers to use fonts and they can be downloaded as the page opens.

Font Face      Google Web Fonts

 

Distortion

Typefaces can be easily distorted and this can be detrimental to their readability.

However, some distortion can be a good thing. In titles and headings, altering the Character Spacing (Tracking and Kerning) between individual letters can create a sophisticated look and tidy-up and uneven spacings generated by the plain text.

It is not advisable to do this with te body text as it will affect readability.

 

Designing for the Web

It is generally considered that a sans-serif font is easier to read on websites. Any font which is plain, has no ornament, but which has a large x-height, is probably a good choice for body text on websites.

 

Image References:

Serif/Sans Serif Font

X-Height

Advertisements

One response »

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s