Typography in Web Design:

A very important but often underplayed element in website design is web typography.  Typography itself is as old as the earliest writing systems and has since developed into a very specialised field.

Typography originated after the invention of printing from movable type in the mid 15th century and has come along way since then. Today we find a large number of typefaces on the web.

How you approach typeface in your design, will either enhance or diminish the visual impact of your website. Function and aesthetics are intrinsic in web design and how well your design works is just as important as how it looks.

New liberty in Web Design: sIFR Text

Creative uses for typeface in web design were limited until recently. Today’s new operating systems have made it possible for website designers to move away from the limitations of using standard system fonts.

Scalable Inman Flash Replacement, better known as sIFR text are giving many website designers creative leeway. In simple terms, sIFR text is a flash rendering technique whereby designers can replace on-screen text elements with flash equivalents. In order to display correctly on someone’s web browser, sIFR requires the following: JavaScript and a Flash plug-in.

sIFR allows website headings, pull-quotes and other elements to be styled in whatever font the designer chooses. It is Search engine friendly and will display the website content as text and not an image.

Important Typeface Tips:

The web is saturated with tips on website design and typography. Here are a few tips that can help you with the choice and placement of your typeface in web design.

Space:

Take note of the line spacing/ leading that you give your text. The space between your words will impact the readability of your copy.

Colour

Consider the colour of your design and choose the colour of your text accordingly. The colour of your text should neither overpower your design nor be consumed by it.

Font Size:

Consider the theme and style of your web design and choose the font size accordingly.  Certain typefaces have been designed as small fonts and will therefore not have the same effect if it is too big.

Take into account that your text size should be readable to different users who are making using different browsers and technologies. Don’t make your text too small or too large.

Legibility

Take your user into account. The emphasis in web design today is on user-centric design. Remember that your website is there to communicate information. The objective is to encourage people to read the information on your site.

Too many fonts

Don’t use too many fonts throughout your website, rather make small adjustments to the existing font. This will help you to maintain a sense of continuity throughout your design. We suggest you use two types of font at most.

Font-smoothing

Any windows operating system lower than vista, does not apply “font-smoothing” as a default setting. This could radically change how the viewers see your text.

When you look at a web design or a photo that has been manipulated it’s hard to see the time and dedication that goes into it.

I thought I would share a tutorial with you that I found on abduzeedo on creating a Milk Typography. You can imagine the time and dedication that goes into creating a website just from looking at the time and dedication that went into creating this one small aspect of a site.

I’ve said it before and I’ll say it again, if you’re a designer then you have to be able to manipulate photos.

The term graphic design can refer to a number of artistic and professional jobs which focus on visual communication and presentation. Various methods are used to create and combine symbols, images and/or words to create a visual idea and message.

A graphic designer uses typography, visual arts and page layout techniques to produce the final result. Graphic design often refers to both the process (designing) by which the communication is created and the products (designs) which are generated.

Common uses of graphic design include magazines, advertisements, product packaging and web design. For example, a product package might include a logo or other artwork, organized text and pure design elements such as shapes and color which unify the piece. Composition is one of the most important features of graphic design especially when using pre-existing materials or diverse elements.

All that being said I found some phots from Josh Sommers who is a very good photo manipulation artist and has even done work for companies like playboy. Checkout some of his work below.

Quality Web Designs

Quality is one of those words you hear used a lot when someone is describing their services or products. And I’ve heard it used a lot in the web design industry.

I believe that there has to be a third person in the designing of a website to make it a quality website. You have your web designers, your programmers and then you have your quality control guy/gal.

I’ve got a client we design between 10 to 15 websites for every year. Once the graphical part of the website is approved he always says, “Okay, now I need the Janeth touch”.

The Janeth touch is where I or someone who works for me comes and looks the site over.
We look for things like;

1. Conversion; is there a call to action and does it look like it will convert the traffic? Does it stand out?

2. White Space; yes, one of the most important aspects to a quality website design is text that has enough white space that it makes me want to read it. I look throughout the design for the spacing within all the elements of the design.

You have look at the whole design, the big picture, and decide where you have too much and not enough white space.

3. Pixel Detail; when designing a website it’s important to understand how important it is to add a little shadow here or there to bring out the details in the design itself.

However, the correct use of shadows can also draw attention to certain areas of the page that you want a site visitor to take note of. Borders, lines and shadows don’t have to be huge to be affective.

4. Typography; Header tags need to be big, bold and lots of space while site content needs to be smaller but still using larger sized fonts because they help to create and open space.

And keep in mind that white space is very important.

If you want a truly great website, then remember, the Devil is in the details.