ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

Typography Basics: Choosing the Right Font for Your Design

Updated on November 15, 2011

Selecting and Using Fonts

There are thousands of fonts available to designers. Which one is right for your project?

Typography is a major component of any document, print or Web page. Using the correct font is one of most critical elements of any successful design and sets the tone for the reader’s interpretation of the content. The reader must be able to experience your design in a way that allows them to understand and learn from it. Making it difficult for the reader to comprehend your message by poor font selection and usage will hinder the success of the pages you worked hard to complete.

The font you choose should be dictated by the intended audience, message of the project and the characteristics of the typeface. For instance, fonts Blade or Feast of Flesh (both cheerfully available from dafont.com) would not work well for your family Christmas card's audience, but may work fine for a haunted house flyer.

A quick history of typography

Typography is a result of Johann Gutenberg’s use of movable type in the 1400s. He was the first European to use individual letters, numbers and spaces that could be assembled, printed, removed and reused. Along with his invention of oil-based ink, movable type became the foundation of printing for centuries.

The creation of alphabets, numerals and characters in a single style, weight and size (called a font) turned typography into an art form.

Definition of Font and Typeface

Font is generally referred to as an alphabet that has an upper and lower cast, numbers and characters in a single size, weight and style.

Typeface is a family of fonts in various sizes, weights and style. For example, the Franklin Gothic typeface shown below has various fonts within it, each a different weight and style.

Tips for choosing the right font

First, if you don’t know the difference between a serif font like Times New Roman and a sans serif font like Myriad, here is an example below.


Serifs are the small finishing strokes on the end of a character. Sans serif fonts do not have these small finishing strokes.

You should limit the number fonts you use on the page to at most two. I have often used a serif font like Sabon for body text and a sans serif font like Mryiad for titles. These balance well on a page in addition to adding strong visual contrast.

You can switch that around and use a serif for the title and sans serif for body.

You can use one font with various weights and end up with a nicely designed page. Franklin Gothic is a good example of a typeface with various fonts within it.

Avoid using two sans serif or two serif fonts together on the page as there is little contrast between the two. Using too many fonts can create distractions and confusion.

Historically, serif fonts are used for most newspapers, books and magazines. However, no scientific studies point to using one over the other. If you should use a sans serif for all your body copy, experiment around to find one that reads well and is easy on the eyes.

However, if you are doing a Web site, you should use a sans serif font. The text will look cleaner and render better in smaller point size for use on PC screens.

Do not underline to emphasize a word or Web site address. Underlining goes back to the days of typewriters. You should use bold or italics for emphasis. I know programs still offer that option but avoid it, if possible. However, a paragraph rule works well for a title, as it spans the width of the column. Also avoid the triple whammy - bold, italics and underline all at once.

Do not use all capital letters for large segments of text. Studies have shown that all caps slow down reading speed and are interpreted as SHOUTING! Who wants to be shouted at while reading? You can do titles in all caps, as long as they are short blocks of text.

Never use all caps in a script font. The letters won’t connect and would be difficult to read.

Watch your use of color. Limit use of colors to two or three. For example, on many of the brochures I do, I use a dark gold for a main title, dark blue for a sub title, and black for body text. I maintain that consistency throughout the brochure.

Let your page breathe

Use white space to your advantage and resist the temptation to put text or a graphic on every part of the page. Use line spacing or leading space before and after a paragraph, and letter spacing along with margin and column sizes to accomplish this. It is all too easy to use the default settings and to depend on that to work all the time. Experiment with the settings that are available to come up with a pleasing page design.

Text on Background

Be careful when reversing type, white or light color, out of a background. Make sure that the type is big and bold and avoid delicate serif fonts. Be careful using text on top of a photograph.

Type size

Body copy should be a minimum of 9 pt and a maximum of 14 pt. Remember your audience in determining type size. Not everyone can read small type easily. Leading should be 2 points more than the point size of the type, that is, 11 point type, 13 point leading.

Headlines and short phrases or blocks of text are usually 18 pts. and up.

Free fonts online

Thousands of free fonts are available for you to experiment with on Web sites like dafont.com, or 1001freefonts.com. Be aware that free fonts may not have standard fonts like Helvetica, Garamond, etc.

You have many choices and decisions to make when you start your design. The combinations of fonts, colors, sizes and placement are almost endless. Hopefully, this advice will help you in combining it all to get a great looking and easy-to-read design.

Comments

    0 of 8192 characters used
    Post Comment

    • Anjo Bacarisas II profile image

      Anjo Bacarisas II 

      6 years ago from Cagayan de Oro, Philippines

      thanks for the very useful hub, i enjoyed reading this page! so much helpful information :)

    • brittanytodd profile image

      Brittany Kennedy 

      6 years ago from Kailua-Kona, Hawaii

      Great hub! Voted up!

    • TTC12 profile imageAUTHOR

      TTC12 

      6 years ago

      Thanks for the comment! This hub was a fun one to do, and hopefully, informative.

    • GoGreenTips profile image

      Greg Johnson 

      6 years ago from Indianapolis

      Great Hub! Good examples and learned much about fonts, typefaces etc. Never realized the differences thanks!

    • TTC12 profile imageAUTHOR

      TTC12 

      6 years ago

      Thanks! I thought that examples showing the wrong way and the right way would help get the point across.

    • profile image

      sestasik 

      6 years ago

      This is great information. The pictures and examples bring so much to the article!

    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://hubpages.com/privacy-policy#gdpr

    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)