Typography is a sadly neglected aspect of the web design process, an oversight traditionally blamed on the technical limitations and unpredictability of the medium. While it is true that the web may not offer designers the same typographic freedom as print, all it takes is careful consideration and a little typographic fine tuning to bring website layouts to life.
Choosing the right typeface
Although we only have a handful of ‘web safe’ fonts at our disposal, selecting an appropriate typeface is still crucial to the success of a design. Each typeface evokes a certain mood, which needs to be matched to the project at hand: Georgia reflects an academic yet vibrant attitude, whereas a sans-serif face like Arial is more austere in tone. If sticking to one font seems too limiting you can judiciously mix and match typefaces to add variety to your layout. Consider the elegant typography of A List Apart, which utilizes Georgia for headlines, Times for bylines, and Verdana for body copy.
Type hierarchies
Once you’ve settled on your typeface, it’s time to establish a typographic hierarchy. This requires defining the scale, weight, placement and spacing of text relative to its importance within a document. A well considered type hierarchy will effortlessly guide the viewer’s eye through a text, and add a sense of balance and structure to the page. Headings also serve to break copy up into digestible chunks, which is critical on the web where a reader’s attention span is fleeting.
Spacing text
Another important consideration is the leading and tracking of text, or in web terms, the line-height and letter-spacing. By default most web browsers will tightly space lines of text, but the CSS line-height property gives us a powerful tool for optimizing leading. Generous leading adds more open space to a block of text and can make it easier for the eye to follow. Similarly, the CSS letter-spacing property can be used to add balance or visual interest to headings by modifying the space between letterforms. Headlines set in capitals respond particularly favorably to loose letterspacing.
Typography is a vital aspect of the web design process, and it is worth investing the time to fine tune a site’s typographic implementation. If you want to delve deeper into the subject here are some excellent online resources to get you started:
Web Style Guide
The Elements of typographic Style Applied to the Web
Five simple steps to better typography
–
From the NoD Sponsor:
Sessions Online Schools of Art and Design is an accredited online graphic and web design school offering:
- Web design classes and web design Certificate Programs taught by renowned design instructors.
Choosing decent fonts on the internet are so important. Web safe fonts are the fonts located on your computer and accesible on all computer systems.
Mixing and matching different fonts is a great way to make text more interesting, but you have to be careful not to go overboard. Too many different styles will make for a cluttered look on a webpage. Since typefaces for web use are limited, though, more freedom can be given to using diferent fonts. The general rule is about 3 different typefaces and fonts, but this is just a guideline. You’ll ultimately have to decide for yourself what’s too much and too little for your web design. Being consistent with what fonts you use for different parts of your site (headlines, the main menu bar, the body text, captions, etc.) will help you maintain an organized while still using several different fonts.
Thank you for taking the time to put this together! If you need help getting traffic to your website try using http://www.thepixelmall.com to get a pixel advertisement
really! it is my opinion i have examine a great decent submit searching for really number of years bless you in the posting. we are without a doubt looking forward to it. why not continue on placing like wonderful items from now on too. my spouse and i contributed that on facebook plus every person loved that! my partner and i furthermore book marked regarding long run guide iphone 5 leaked pics!