8 Tips for Web Typography. What in the world is Web Typography?

Make a SPLASH with your fonts, but make sure they are legible to your readers.
Make a SPLASH with your fonts, but make sure they are legible to your readers.

By Tamy Bond
Typography is a subtle, yet powerful tool for delivering information to your site visitors. If you are a visual type person, you will notice font types, sizes, and placement on a website. Maybe unknowingly, your eye is drawn to a certain area or sections. This is in part due to the art of typography. If you are a graphic designer, this may come easy, but to the rest of us, it’s a learned behavior to look at typography. Many typography mistakes on the Web are huge, confusing your audience and leading them to think badly of your site and therefore, your business. So, let’s delve into the land of typeface design, lettering, typography inspiration, typeface trends and so on.

words make a differenceWith words, it’s not just what you say, but how you say it. When it comes to fonts, there’s a big difference in how people perceive your content. Sometimes it’s simply can your audience read what you have on your site. Remember your target market and know what they like! If they are younger, they will like more trendy fonts and lettering. If they are older, you may need to consider readability and stick with simpler, bolder fonts. Understanding trends is important to keep your site fresh, but don’t get so caught up in being trendy that you sacrifice the overall aesthetics of your website design. Always keep in mind the end result is that your visitors can easily read or understand your design calls.

Typography Tip #1:
A simple rule of thumb is Serif vs. Sans. Serif font (eg. Times Roman) is usually considered more decorative. Sans(-serif) font (what you are reading now) is usually considered more readable and simple. However, there is individuality that comes into play here. You will find most people have a preference depending on what they like, sometimes without knowing it. I always show people the same text in different font types because most know what they like when they see it, but don’t have a clue why. For web design, we need to keep this in mind.

Fonts.comabc-jumble-letters_1280 has this to say:

“Although serifs are considered to be decorative, their appearance may well serve a higher purpose. Serif typefaces have historically been credited with increasing both the readability and reading speed of long passages of text because they help the eye travel across a line, especially if lines are long or have relatively open word spacing (as with some justified type).

Others dispute this viewpoint, asserting that what we read most (serif text), we read best. This might very well account for the popularity and dominance of serif typefaces in the U.S. for lengthy text in print, including books and newspapers. That said, the fact remains that many sans serif typefaces exist that are more legible at any size than some serif designs. So whichever style you choose, take note of the particular characteristics and overall legibility of the design, including specific weights and roman vs. italic.”

Google has a plethora of fonts to look at and choose. I suggest you check out their many font types and see for yourself what a difference Serif vs. Sans makes for you.

Typography Tip # 2: Large vs. Small Text
big or small - size mattersOne typography trick that has become more common is large call-to-action (CTA) text with smaller text underneath. This tends to draw the eye to the CTA and encourage your site visitor to convert into a customer or subscriber. The larger CTA text is often encapsulated by imagery or graphics to further draw the eye. Typically, the text is in the same font, but should at a minimum be in complementary typefaces. We have this on our website: Eagleswingwebserices.com

Typography Tip # 3: Simplify Typefaces
In the fall of 2015, Google changed their logo. Did you notice? They went from Serif to Sans typeface and made it bright with multiple colors and also animated. By choosing a simpler typeface, you can add additional elements that might not work as well with a more complicated typeface, such as the bright colors for every letter, animation or some trendy graphics. It’s especially nice to be able to add graphics for special emphasis or holidays. People like the added touch when it’s not overdone.

Typography Tip # 4: Watered-Down Fonts
watercolor splashWatercolor fonts (see header photo for examples) are making a big splash (pun intended) as people are more creative in their web design. Watercolor fonts go perfectly with the soft, muted backgrounds. This font probably works best for logo or call-to-action because it may need to be large to be readable. A more creative, modern flare works great for photographers and artists with portfolios, crafting, homemade items, children books, or any creative endeavor. Millennials especially like this typeface. It is definitely one to consider to grab interest.

Typography Tip # 5: “Branding” Typefaces
You can’t actually “brand” a typeface as yours, but choose carefully as it will stick with you for a long time. The fonts you use in your logo should be repeated in your web design. Consistency is the key to branding, so make sure you choose a font that can grow with your business. That’s why some businesses choose to redo their logo in a few years, to go with the current trend, not the best idea. Be sure to think through your typography when looking at all areas of your branding strategy, including your website.

Typography Tip # 6: Typefaces for multiple devices
With more people using smartphones and tablets to surf the Internet, it’s important to use a font that can be read across multiple devices. When looking at typefaces, be sure to see how it will translate to iPhones and droids, kindles, tablets, or iPads as well as desktops and laptops. You might be surprised.

Typography Tip # 7: Combining Typefaces
compare-apples-oranges_1280Sometimes, a single font simply isn’t enough to get your point across. Combining fonts is a creative way to design a unique look for your website or call-to-action. One thing you’ll want to make sure of is to use fonts that are complimentary. For example, you can combine serif and sans-serif or sans-serif with a script on top or in the background. You can use more than two different fonts, but be careful as it can be distracting for your audience. Be sure to keep them focused on your message and call-to-actions.

Typography Tip # 8: Images and Strong Typefaces
It’s trendy now to have a large image or even video with text above the fold (at the top of your page), especially on your homepage. Many people are visually drawn to content so this is a great eye-catcher. However, with a large background image that fills the screen, it becomes very important to use a typeface that is large and bold or it will get lost in the patterns of the image. Coloring becomes important also when keeping in mind that your users need to easily read the content. If you use this tactic, use it as a call-to-action and keep it simple. A picture is worth a thousand words, right?

love-words_1280Typography is at the soul of a website design and has a large impact in its effectiveness and appearance. Be careful with typography and learn how to avoid the common mistakes. Take a few minutes and do some research of your own. Look at websites and see what they are doing well and not doing well. Learn from what you see. Check out your competitors and big name brands. This will give you a good idea of the trends. Then, you can see what might apply to your needs and calculate your next move.

The Internet is ever-changing and designers are always coming up with new ideas. That is why it is important for you to know what looks good and where the eye is naturally drawn on a page. By learning to do this, you will develop a good sense of design and fine tune your ability to break the rules when needed and follow them when necessary to come up with a unique design that works best for you and your site visitors.

Share This Post
Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email

2 thoughts on “8 Tips for Web Typography. What in the world is Web Typography?”

  1. I had an interesting experience with my first picture book for children. I knew I wanted the child-friendly “a” (not like this one), but other than that I was pretty open to suggestion. So we copied a paragraph or two in several fonts that had a child-friendly “a” and sent them out for feedback. Almost every person chose the same font, so we not only used it in “Scissortown” but also in subsequent books.

  2. It’s truly amazing what people think when they see certain items or text – without even knowing why – they choose to like them or not like them. It is an interesting study: The world of typography! Not usually your first thought when writing or publishing, but definitely something to consider.

Leave a Comment

You might also enjoy