Typography is an art form rarely covered in the spotlight. Web designers toooften indulge into page graphics and CSS effects. Ironically pagetext is what carries the information you’re trying to spread, thusshould hold much higher importance to your visitors. I find the problem isn’twith a lack of interest but a lack of knowledge on the subject.
When discussing typography there are many aspects concerning such a topic.Aside from font families you’re dealing with serif/sans-serif typefaces,weight, kerning, leading, and similar ideas. This article is meant to slowlyintroduce designers into the wacky world of digital type.
Base Term DefinitionsLet’s discuss a few key terms which should clear up some confusion rightaway. The first important set of keywords defines font andtypeface. A font is described as a specific set of characterswhich make up one font face. This could be Arial, Tahoma, Times New Roman,Georgia, and the many others we encounter.
Similarly a typeface defines a family of font styles. The key word here isfont styles which separate many different fonts into groups,or families. These typefaces could include sans-serif, serif, script,monospaced, and others. You may also categorize typefaces by styles such asbold text, italicized text, etc.
The most important consideration building your site out is styles of fontsto use. There aren’t as many which can be shared via the Internet since thereis such a variation between installed fonts in Windows and Mac environments.Thankfully Google Web Fonts offersa very elegant solution to this problem which many web designers haveadopted.
Some of the more obscure terms include weight andkerning. These can all be manipulated through CSS propertiesapplied to paragraphs, headings, or other text elements. The weight of yourfont can be adjusted and displays a “heavier” bolding of each letter. Kerningis a technique used through the letter-spacing property to add or remove extraspace between letter symbols.
Breaking the NormIt’s entirely rational to discuss the need for new fonts on the web. For thepast decade many pages have become stale and ripe with repetition. The sameArial and Geneva font stacks can become old using them on every project. Andalthough you can still manipulate colors and special effects, often timesparagraph font will be much more readable in black/dark grey Arial type.
Where many of us wish to customize our text starts with page headings. Fromthe many possible effects granted with CSS there are countless opportunitiesfor personalization. These include such packages as Google’s Web Fonts whichwill also expand your library of possible font families to choose from.
For branding purposes it’s generally a good idea to match headings with yoursite theme. These may include a color scheme, underlines,background icons, or in-text graphics. Ultimately the decision is yours andthere are plenty of resources to help you work out typographiccombinations.
Rally ‘Round the FamilyBetween the many font families available to Windows and Mac users these justdon’t seem to cut the cake with logo design. Working in Adobe Photoshop orIllustrator requires much more precision and creativity. The base font familiesare okay, but this seems like a lacking in the imagination to seclude yourselfinto this set.
Although there are many free font directories online, you can spend hourswasting away browsing archives for just the right choice. Check out ourcollection of sleek fonts to get some ideas flowing.
Keep in mind not all typefaces will fit within the mood of your website. Forexample calligraphy has been popular with fancy venuesshowcasing the handwritten style. Also high class corporations and restaurantswill use these fancy styles. On the contrary If you’re building an arcade orgaming website you may steer towards larger, more vaulting type faces to leavea big impression on your visitors.
Distinguishing Page DynamicsIt’s important to use typography as a liner map of your page design.Paragraph text should mold into block formation with easy-to-skim alignments.Similarly if your visitors are skimming for hyperlinks ensure these will standout and be easily clickable.
If you’d like to find other advice on hyperlink design I recommend ourmoderntypography tips article. Hyperlinks are vital not only in paragraphs butalso in your heading, sidebar, and list content sewn throughout your pages.Since you’ll generally be working within the same font family thedistinguishing factors would include background colors or rounded cornerswithin hyperlink text.
Reading MoodsEach font family will bring about differing moods within your readers. Ifyou are not very connected with the Internet it is simple to overlook thesefeelings. However just because you tend to pass up recognition does not makethem any less “real” in the grander scheme
For example serif font choices in your paragraphs denote afeeling of professionalism and reputable information. This is often seen inmainstream media resources such as The NewYork Times. For smaller blogs you may enjoy large paragraph text with agreater line-height so readers may skim and clip out portions of your blogposts.
Font combinations can be very difficult. They provide a typical balancewhich isn’t often construed in today’s modern web atmosphere. In this briefarticle outline Jennifer Moline mentions a few techniques for working withdiffering font families in your webpages without botching the entire design.It’s a delicate process but with enough practice not too difficult in projectwork.
ConclusionAbove we’ve gone into a collection of ideas to work with font families.Building fonts for Photoshop designs vary greatly compared to web-basedapplications. This explains why so many webmasters find it difficult tocustomize their typography.
The resources shared above should be a huge jumping off point for newbies inthe field. I highly recommend messing around with Google’s Font database if youhaven’t already. There is a lot of information and content available if youknow where to look. And Google is just one of these service providers.
Digital writing is a deep topic and requires a very dedicated study. Ihaven’t touched upon everything here, so please do share your ideas andsuggestions in the comments below. On the same note if you have links tohelpful typographic resources the design community would prosper greatly.