alphabet, font, line art-5979425.jpg

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

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 that reflects badly on your business. So, let’s delve into the land of typeface design, lettering, typography inspiration, typeface trends and so on.

once upon a time, writer, author-719174.jpg

With 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.

alphabet, abc, letter-1219546.jpg

Fonts.com  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

dad, son, walking-909510.jpg

One 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.

drop of water, drop, splash-166735.jpg

Typography Tip # 4: Watered-Down Fonts
Watercolor fonts are making a “big splash” 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, 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.

orange, citrus, fruit-4663073.jpg

Typography Tip # 7: Combining Typefaces
Sometimes, 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 customary 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, romance, valentine-1817504.jpg

Scroll to Top