ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

Using Effective Typography Techniques for Creating Outstanding Electronic Documents

Updated on March 27, 2014

A Quote from Beatrice A. Warde, Expert on Typography

"Type well-used is invisible as type. The mental eye focuses through type and not upon it, so that any type which has excess in design, anything that gets in the way of the mental picture to be conveyed, is bad type." Beatrice Warde (1900-1969)

Beatrice Ward was a commentator and authority on typography. One of the works she wrote,"This is a Printing Office", was produced as a broadside, which is essentially a large poster, printed on one side. This broadside has been cast in bronze and is mounted at the entrance of the U.S. Government Printing Office in Washington, D.C. A statement to her expertise and research on the effective of various typographic practices.

The quote is very relevant today in this era of electronic publication. With all of the available options for font, size, color, formatting, and multimedia it is easy for content to get lost in technique.

This article and perhaps several others which follow will look at some of the terminology of typography as well as some guidelines and examples of techniques which make the "type invisible" and the content stand out.

Some of the Terminology Used in Document Design

Some of these terms might be "old hat" while others might be quite new. As this document will be one of several in discussing effective document design they are presented here alphabetically. More words to the vocabulary as we work through typography and page design.

Flush-left ragged right is the way that this document is presented. The margin on the left is uniform. The right margin is irregular.

Grid is the cross-ruled guidelines over which a page are assembled.

Gutter margin is an internal margin generally between columns of text.

Hanging indentation is a "reverse" of a normal paragraph. in this case all lines but the first are indented.

Justification is the term used for setting text to the same exact width. Justification is achieved by irregular word spacing. Justification can be contrasted with the flush-left ragged right method of document layout.

Kearning is a term for differing letter spacing in a word to create a more visual pleasing effect.

Leading like the word font are holdover terms from when text was metal. In those days of printing, lead slugs were used to separate lines. Leading is synonymous with the term line spacing. When no additional line spacing is used the document is said to be set solid.

Margins surround the live area of a page: on the top, bottom, left, and right sizes.

Serif and san serif text fonts. The difference is really in the ornamentation which sidstingushes serf from san serif fonts. (See the illustration below.)

Typographic color refers to the lightness or darkness of a page element. Bad color discourages reader from reading. For example, who wants to read a page whose text is all yellow or pink?

White space is the empty area the "real estate of a document page which is subtracted from by imagery and text..

Word spacing is the space between words in a document. Consistent word spacing is important. Inconsistent or excessive word spacing slows the reader down and distracts from


Making Text Appealing

There are a number of ways to make text appealing which we will discuss at some length in future articles:

  • effective use of line spacing. How to balance overcrowding with overly sparse.
  • position of text in relationship to images on a page:
  • using contrasting font types
  • varying font size and font weight
  • effective column width and length
  • creating distinctive page layout
  • relating page shape to page content

Effective and Consistent Page Typography for the World Wide Web

Much of the information today is published exclusively for the web. The pitfalls which occur in using too much technology. Content should not take second place of "dazzle" design. The goal of good design is good communication.

Contrasting Serif and Non-Serif Font Type

In this illustration of helkvetica font. The black letters would be the san serif representation while the black letter with the small red line stoke added.
In this illustration of helkvetica font. The black letters would be the san serif representation while the black letter with the small red line stoke added.

Sources of Good Design Information

I have found several sources which I use in coming up with a clever design for an article.. They are worth investigating if not having them on your personal bookshelf.

Beavington, William, Craig, James, Scala Irene Korol. (2006) "Designing with Type the Essential Guide to Typography 5th Edition". New York: Watson Guptill ISBN-13: 978-0823014132

White, Alex (1992) "Type in Use: Effective Typography for Electronic Publishing. New York. 1992. ISBN 0-8306-3796-6.

Your Favorite Font

What is your favorite font?

See results

What's Next?

This article has been one of pre exploration. The subject of what is effective typography has been raised., some terminology was discussed, and several sources for further information were given in the reference. Our next article will start looking at specific element of page design and what makes them work.

An Example of "Kerning" Text

It is interesting but merely coincidental that Peter Kern's  advertisement seems to have an element of kerning to it.
It is interesting but merely coincidental that Peter Kern's advertisement seems to have an element of kerning to it.
This bronze plaque with the broadside "This is a Printing Office" penned by Beatrice Ward can be found at the enterance of the U.S. Government Printing Office in Washington, D.C.
This bronze plaque with the broadside "This is a Printing Office" penned by Beatrice Ward can be found at the enterance of the U.S. Government Printing Office in Washington, D.C.
working

This website uses cookies

As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://corp.maven.io/privacy-policy

Show Details
Necessary
HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
LoginThis is necessary to sign in to the HubPages Service.
Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
AkismetThis is used to detect comment spam. (Privacy Policy)
HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
Features
Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
MavenThis supports the Maven widget and search functionality. (Privacy Policy)
Marketing
Google AdSenseThis is an ad network. (Privacy Policy)
Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
Index ExchangeThis is an ad network. (Privacy Policy)
SovrnThis is an ad network. (Privacy Policy)
Facebook AdsThis is an ad network. (Privacy Policy)
Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
AppNexusThis is an ad network. (Privacy Policy)
OpenxThis is an ad network. (Privacy Policy)
Rubicon ProjectThis is an ad network. (Privacy Policy)
TripleLiftThis is an ad network. (Privacy Policy)
Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
Statistics
Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)
ClickscoThis is a data management platform studying reader behavior (Privacy Policy)