Perspective, tips, and insight

Articles to help you improve your digital marketing

Type talk: Improving your typography

(Photography by Relly Annett-Baker, CC BY-NC-SA 2.0)

Capline, meanline, baseline, beardline. X-height, ascender, decender. Kerning, leading, font size, set width. When it comes to typography, there are a lot of technical terms to learn to become an expert, but you don't have to know every last detail to talk intelligently about type and make decisions about what type to use and how best to use it.

Is the font big enough?

Sometimes, when increased readability is the desired goal, novice designers will compromise designs by setting their type too large, thinking bigger is better.

Contrary to popular belief, though, when type is too large—especially when it's displayed in a small space—readability is hindered. Without adequate space around text blocks, readers can become fatigued and may become less likely to continue reading.

Ultimately, when it comes to sizing type, trust your eyes. They usually are the best tool for deciding what is best. This is not an exact science. Because there are variations in set width and x-heights between typefaces, some will appear bigger than others despite being set at the same size.

Here are some guidelines for judging the size of your type:
  • For a distance of 1.2 feet (the typical reading distance for a book):
    Most people prefer 10, 11, or 12 points type. Avoid going below the minimum, which is 8 points type.
  • For a distance of 2.4 feet (the closest comfortable distance for reading posters):
    Aim for no less than 16 point type for the smallest copy blocks.
  • For a distance of 5 feet:
    Make sure the minimum font size used is no smaller than 32 points.
  • For a distance of 12 feet:
    Go for no smaller than 72 points. For reference, keep in mind that 72 points = 1 inch.
  • For a distance of 100 feet:
    Make sure the minimum font size that you use is no smaller than 3 inches tall.

How to determine the ideal measure

The measure of a line is the length of a line of text. When setting type into a single-column, the measure should ideally be between 40 and 80 characters, with the ideal measure hitting around 65 characters. When the measure of a line is too short, the result can be awkward spacing and slowed down reading. When the measure of a line is too long, the type can cause eye strain and possibly  decrease comprehension. A measure that falls too far outside the optimum range can make your layout not only ugly but difficult to read, too.

All fonts are different. When it comes to measure, what works in terms of legibility for one may not work for another; however, the alphabet-and-a-half rule is an easy to use formulas to help you find an ideal measure:
  • The Alphabet-and-a-Half Rule
    This formula is simply 39 characters (letters, punctuation, and spaces), regardless of type size. Once you have set this copy, use this as your starting point to judge readability of your column of type by adding more characters if necessary. When using multiple columns of types that are the same width (such as those used in editorial layouts), 40–50 characters per line is often preferred measure.

Making type work online

In the ever-changing web design environment, it's crucial to make type a priority and remember that users will access your content on a variety of platforms. Plan out type sizes carefully during the initial design process and set-up your grid to make sure your copy blocks are as legible as possible across a wide range of screen sizes.

How Cloud Computing helps your web project

This spring we wrote a post about the prevalence of Cloud Computing in today's society.  Working in the cloud is indeed a technology trend and as with all trends, you should closely examine its pros and cons before jumping in head first. Here at TBH Creative we are actively using Cloud Computing with our clients and among ourselves. Let's talk about these applications and their benefits.

Cloud Computing keeps everyone on the same page. Literally.

When we have a fairly involved project, particularly one that involves content development work and the many files that go along with that, we set up a Google Drive for the client. These shared folders help us all make sure we are working on the latest document. They eliminate the need to email multiple files or large graphic files. The Google Drive also ensures that everyone on the project has access to the files they need, when they need them.

One of the nice benefits of Google Drive is that it levels the file sharing playing field by giving everyone access to all file types. If it's in Google Drive, everyone on the team can see it, regardless of the file type. Conference calls are made easier as we all have access to the same information. Speaking of access... you can also collaborate on files in real time. For example, in a recent conference call reviewing content I made changes as the client was noting them. She could watch me type in the changes and approve them on the spot.

Cloud Computing makes our team more efficient.

In today's world people work on the same project from many different physical locations. Cloud computing helps virtual offices come together efficiently. As soon as the site navigation is finished, it is accessible by the design team and the development team. No emailing and worrying that you're not looking at the latest file version. When a client sends a set of notes to one team member, they can post them on the drive for everyone to see.

Cloud Computing drawbacks.

Cloud Computing isn't perfect. What happens if your Internet access goes down? What if someone on the team uses one file as a dumping ground instead of organizing files in clear folders? We recommend that you keep a copy of all critical project files on your computer or USB drive so that you always have the ability to keep working. We also think it's important that one person be assigned housekeeping duties - typically the project manager - to make sure the files are organized and easy for everyone to use.

Google Drive. DropBox. SkyDrive. Adobe Creative Cloud. There are lots of options available for cloud computing and all offer nearly identical services. Some are free - or free to a storage limit. We think those versions are the places to start. If you exceed a storage capacity you will have used the service long enough to determine if a fee is worthwhile. Want more detail on how well the cloud drives sync files and work? Here's a recent comparison of the most popular services: Dropbox vs. Google Drive vs. Amazon vs. Skydrive: Which One Is Fastest? 

Is Cloud Computing a tech trend? Certainly but it's a trend with some serious value. Cloud Computing saves time, keeps everyone on track and lets people move forward as soon as files are ready. It's just one tool that TBH Creative uses to build successful strategies and high-end web solutions for businesses. Contact us to learn more.

Refine your digital presence with web fonts

Web fonts are web-safe fonts that offer more flexibility for designers in terms of typography. Before web fonts, there were only a handful of fonts (like Arial and Verdana) that were rendered the same by almost all web browsers. With web fonts, designers now can creatively use just about any typeface online without having to embed fonts as graphics.

Icon fonts to the rescue! Making icons look great on all devices

In a previous post, we discussed the implications of Retina display on a website's images. Maintaining the quality of an image across all devices is key, and there are a number of new solutions to help websites provide the best images as possible to as many users as possible. One such method that has been gaining popularity is the use of icon fonts.

Icon fonts are just what they sound like - fonts that are made up of icons. They have quickly become a widely used alternative to using images for icons, and they are quick and easy to implement. Let's take a look at the benefits of using icon fonts, as well as what you need to know in order to start using them on your website today!

The benefit of icon fonts

Icon fonts provide many advantages that images don't:

You can adjust the appearance of the icons simply using CSS.

If an image needs changed, you can only do that by going back to edit your image file. With icon fonts, you don't need any software to make simple adjustments. You can resize the icons, change their colors, add drop shadows, and more, just with a few lines of code in your website's CSS file. For example, if you want your image to change on hover, you no longer need to make two versions. Instead, use the CSS :hover selector on your icon and give it different styles. It's that easy!

They are infinitely scalable.

Unlike images, you can resize icon fonts up and down without changing the quality, just as you can with the text on your website. For this reason, icon fonts make a great choice for serving images to devices using retina-display, or for sites that are responsive and need to adjust to all devices.

Font Awesome is one of the most popular icon fonts out there, and is free to use on your website. Below you can see an example of a Font Awesome icon, and how it scales without losing quality like a regular image would.

Icon example from Font Awesome

They are easy to implement.

All you need to get started using icon fonts are the font files and some CSS code. That's it! Once you have those in place, icons can be added to menus, lists, headings, and so on with just some basic HTML.

The website Font Awesome uses icon fonts to enhance its content

Things to consider:

Which icon font to use.

There are many icon fonts readily available for use, both free and premium, and more are popping up all the time. You can find a huge list of icon fonts to choose from at CSS Tricks.

If you would rather create your own icon font, there are also tools that can help you with that. For example, IcoMoon is a great tool that allows you to put together a custom icon font using their broad selection of icons or by uploading your own. Once you've selected your icons, you can export the font files and the code you'll need.

Create a custom font using IcoMoon

Which HTML syntax to use.
There are several different ways that icon fonts can be placed on your website, and that can change based on which icon font you are using. Many of the popular icon fonts require an empty tag where the icon font will be displayed using CSS, like this: <i class="icon-camera-retro"></i>. Make sure to check out the documentation for your icon font to find the right syntax.

Cross-browser compatibility and accessibility.

You'll need to consider your users when choosing the right icon font, specifically whether or not you need to support older browsers. Depending on the technique you're using to call your icon font and what browsers your website is supporting, you may need to make some adjustments to ensure your icons are cross-browser compatible. Some icon fonts come with this support built into the code, but others don't.

You also need to take into consideration accessibility issues. Again, depending on the syntax used to call your icon font in your HTML, it may not be fully accessible to screen readers. You can find out more about icon fonts and accessibility in this article by Chris Coyier.

Receive articles in your inbox