JoomlaWorks

Member Dashboard
  • Home
  • Extensions
    • Commercial
      • Frontpage Slideshow
      • K2 Plugin for sh404SEF
      • Simple Image Gallery Pro
      • SocialConnect
    • Free
      • K2
      • AllVideos
      • DISQUS Comments for Joomla!
      • IAKI (Import As K2 Image)
      • Quick Menu (for Joomla 4)
      • Simple Image Gallery
      • Simple RSS Feed Reader
    • Free On Github
      • Akismet for Kunena
      • Fill It Up
      • K2 Example Plugin
      • K2 Links for JCE
      • Rebuild K2 Image Cache (CLI utility for K2)
      • TinyLetter Subscribe
      • URL Normalizer
      • User Extended Fields for K2
  • Templates
    • Commercial Templates
      • Anagram
      • Archetype
      • BusinessOne
      • Ibento
      • Janaro
      • Kiji
      • Matchbox
      • nuMuzik
      • RadioWave
      • Toreda
    • Free Templates
      • nuModusVersus
      • Takai
  • Demos
    • Joomla Extension Demos
    • Joomla Template Demos
    • WordPress Plugin Demos
  • Labs
    • Web Apps
      • JSON 2 JSONP
      • Feed Reader (bookmarklet)
      • Device Info
  • Support
    • Documentation for Joomla Extensions
      • AllVideos
      • Frontpage Slideshow
      • Simple Image Gallery
      • Simple Image Gallery Pro
      • SocialConnect
    • Documentation for Joomla Templates
      • General Resources
        • Installation
        • Content
        • Customization
      • Commercial Templates
      • Free Templates
    • Get Help
      • Community Forum
        • Recent Topics
        • Categories
        • Create free account
      • Help Desk
      • Contact us by e-mail
      • Contact us on Facebook Messenger
      • Contact us on Twitter
  • About
    • Blog
    • Company
    • License & Terms of Service
    • Privacy Policy
  • My Account
15 11 2013
Written by  JoomlaWorks
Published in Blog
1 comment

Web typography: best practices and common pitfalls

Web typography: best practices and common pitfalls

Typography on the web has grown leaps and bounds in the past few years. Gone are the days when you had to choose between a handful of system fonts with sometimes embarrassing results (Yes I’m looking at you Comic Sans) or you had to jump through various hoops to use a non-system font on your website. Thankfully the resources and tools available right now make it easier and safer to make changes to an existing website design or template as long as we bear in mind some common best practices and take advantages of the tools at our disposal. Let’s dive in and examine some of these.

All fonts are not created equal

The width and height of each character is usually different across typefaces for the same weight, style and font-size. I know this can be very confusing at first so let’s take a look at an example.

In the screenshot below you can see the letters of two different typefaces: Oswald (in blue) and Open Sans (in red) both set with exactly the same font size, line height and weight but different colour and font family. (There is also a live version available if you care to tinker with it on codepen.)

Notice something peculiar? None of the letters are actually 120px in height (marked by the two horizontal lines) and there’s a big difference in what 120px means between the font-families themselves too. And this goes for the width of the characters as well. Without getting into too much detail, the reasons for this are mostly related to the way fonts are designed although there might cases where it’s just a matter of a badly designed font.

The lesson to be learned here is that choosing a font, or replacing an existing one, should be practiced with caution. Changing a font-family without considering the size, among other things, may affect the readability of your text or may cause unwanted text wrapping. On-line tools likeTiff  and Typewonder can help you spot these differences in size so that you can make sure you’re picking the right typeface for the job or determine the adjustments you need to make.

 

Counting the font-family …members.

Now that there’s an abundance of web fonts on-line, one important thing to note is that not all font families available have the same amount of widths and styles. Google Web fonts hosts hundreds of font families some of which have up to 12 different styles like Christian Robertsons’s Roboto, whereas others, like Julieta Ulanovsky’s beautiful Montserrat has only two styles available:  

2

This doesn’t mean that one font-family is better than the other but if you’re planning to use a web font with long body of text, it is generally preferable to pick a font with many styles available to ensure the formatting of the text such as bolding and italicising will be rendered correctly. If, on the other hand, you’re looking for a font family to replace an existing one you need to make sure the font family you choose has matching styles.

 

Font rendering issues

Another crucial difference among fonts is the way they are rendered on screen. This means that the font you choose might look different to the visitors of your website depending on the browser and the operating system they might be using. In most cases the differences for a given font family can be minor and noticeable only on smaller text sizes but there are cases where it can seriously affect the legibility of your text.

Making a font look good across a wide range of systems, also known as ‘font hinting’ is a lot harder than it sounds and requires a substantial amount of work on the font designer’s behalf.

Some font services like Typekit offer previews of each font style available across a number of systems and browsers to save you from the trouble of having to check them all by yourself. For the rest of the fonts it’s up to you to do the testing though.

3

 

Setting your typography on the browser.

It's a common secret that the best way to test all of the above and make sure you’ve made the right adjustments, is to do the testing right in the browser, but this is can be tedious since it might require a lot of code writing and browser reloading.

Fortunately, on-line tools such as Typecast provide a complete design environment that lets you experiment with thousands of fonts and practically every aspect of typographic design.

4


EXTRA TIP: Avoid using 'Lorem Ipsum’ text when designing text as it can often be misleading since it prevents you from reading the actual text you are typesetting. For optimum results, use an excerpt of readable text written on the target language of your website. 

 

Beyond Google Web fonts.

Tired of using the same ol' fonts from the Google Web Fonts directory? There are plenty of resources online resources such as Font Squirrel and the recently updated Edge Web Fonts service from Adobe that provides even more great choices and alternatives.

In fact Adobe’s Edge font service uses Typekit’s excellent interface for discovering and filtering the available web fonts, a feature that’s sorely missing from Google’s Web Fonts service.

5

 

Typekit easter eggs

Speaking of Typekit and Adobe, I’ve recently discovered that a handful of typefaces available on Typekit’s service support even more languages than it is officially stated on their website. 

Beautifully designed fonts like FF Din, FF Meta and Myria Pro provide support for extra languages such as Greek or Vietnamese.

 

Typography beyond text

In case you’ve missed it, webfonts are widely being used as a way to display various icons on websites as well. There are many advantages using this method since webfonts use vectors instead of bitmaps to display each icon. This makes such webfonts (also called iconfonts) very lightweight and flexible since they behave as text which is both easily scalable and stylable using plain CSS. Services like IcoMoon enable you to create your own custom icon font using icons from other icon fonts or your own custom vectors in SVG format.

6

 

Look under the hood for inspiration

If you’re stuck trying to find a good webfont or webfont combination for your site, you can always seek out for typographic inspiration around the web. A great starting point would be sites that catalog examples of great typography online such as Typ.io or Fonts in use.

The easiest way to find out what typefaces are being used by a website is to use WhatFont a browser extension/plug-in that lets you click on any selectable type to reveal all kinds of information related to the typography of each block.

 

what-font

 

System fonts are not that safe anymore.

There are cases where you might want to use a system font, a font that’s available already on the system of your visitors systems, either because you like it better or you have to, because using an external font service is not an option. 

Contrary to what you might think, this is not as easy as it used to be. The explosion of smartphone and tablet usage has increased the amount of different devices and operating systems that can potentially access your website and each one of them might have a different set of system fonts.

In those special cases it’s good to have an updated reference such as iOSFonts and TinyType that catalog all the system fonts available on popular systems, and a well crafted fallback list of fonts. 

 

Testing your responsive typography

The advent of responsive design, among other things, bade farewell to the illusion of fixed width viewports and the handfull of screen resolutions and systems you had to consider. Nowadays it's all about fluid containers, high resolution screens and cross-media legibility. Adjusting your web typography to look great under all those unpredictable circumstances may seem impossible at first but fear not, there are plenty of methodologies you can apply especially if you write your CSS using SASS but not all of them are easy to apply. 

Before delving into media queries and SASS mixins, especially for those new to typography on the web, I would recommend experimenting with Flowtype.js by Simple Focus. Flowtype.js uses javacript to adjust the font size and line height of your text according to the width of a specific container by setting up a few parameters. Although Flowtype.js does not offer the fine-grained control over your typography, a larger and more complex project may require, it does work quite well and it can definitely become a useful prototyping tool to determine the manual adjustments and optimizations you need to make.

flowtypejs

 

And that’s a wrap!

The recent advances on the web have marked a new powerful era for on-line typography and I believe we are still scratching the surface of what can be achieved. But, as always, great power comes with great responsibility and so following some of the best practices and making right use of the available tools and methodologies can help us avoid serious mistakes and dangers that might be hiding around the corner.  Be sure to come back as we’ll be posting in-depth articles about some of the topics we covered in this post, along with tutorials and walkthroughs for you to explore and experiment with. 

 

Read 34787 times Last modified on Wednesday, 28 January 2015 18:22

1 comment

  • Douglas Douglas 29 Jan 2015
    Comment Link

    As for typographic inspiration, there is another resource, Fonts of the World, that tracks all the typefaces in uses from the Alexa top 10k. It has historical data for trends, and simply let's you see what other popular sites are doing. For instance, the use of icon fonts is much more widespread than I would have guessed if I hadn't seen the data!

    http://bonfx.com/fonts-of-the-world/

Leave a comment

Make sure you enter all the required information, indicated by an asterisk (*). HTML code is not allowed.

back to top
BY MAIL BY RSS

Archives

  • March 2023 (1)
  • January 2022 (1)
  • July 2021 (2)
  • May 2021 (1)
  • February 2021 (1)
  • December 2020 (1)
  • September 2020 (1)
  • June 2020 (1)
  • May 2020 (1)
  • February 2020 (1)
  • January 2020 (5)
  • December 2019 (2)

Tag Cloud

allvideos announcement apache community development frontpage slideshow joomla k2 Performance plugin release sh404sef simple image gallery simple image gallery pro simple rss feed reader socialconnect ssh tips update video

Latest Entries

  • New free extension release: Quick Menu (for Joomla 4)
    Written by  JoomlaWorks
    06 Mar 2023
  • Simple Image Gallery (free) v4.2 released
    Written by  JoomlaWorks
    07 Jan 2022
  • Simple Image Gallery Pro v3.9.1 released (bug-fix release)
    Written by  JoomlaWorks
    26 Jul 2021
  • Simple Image Gallery Pro v3.9.0 released
    Written by  JoomlaWorks
    05 Jul 2021
  • Simple RSS Feed Reader v3.9.0 released
    Written by  JoomlaWorks
    25 May 2021

Join Our Newsletter

Enter your e-mail address to subscribe to our new or updated product notifications. We send combined newsletters, so we won't spam you every week :)

Get Social

  • Twitter
  • GitHub
  • Facebook
  • GitHub (K2)
  • YouTube
  • Speaker Deck

Grab Our Feeds

  • Extension Updates
  • Blog
  • Videos
  • Presentations
Copyright © 2006 - 2023 JoomlaWorks Ltd.
JoomlaWorks Ltd. and this site is not affiliated with or endorsed by The Joomla! Project™. Any products and services provided through this site are not supported or warrantied by The Joomla! Project or Open Source Matters, Inc. Use of the Joomla!® name, symbol, logo and related trademarks is permitted under a limited license granted by Open Source Matters, Inc.
designed by Nuevvo