A Brief Evolution of Type on the Web

These days, websites have a new dimension added with the wide use of custom font embedding options like Typekit, Google Webfonts, and others.

No longer will you see websites flooded with Arial, Verdana, Georgia and other ‘web safe’ fonts. Even though you may not have even noticed some websites using web safe font variations, but once you see how a site designed with custom fonts stands out from the rest – you will always see the difference! The latest websites that I have been working at Pictura, utilise custom fonts such as: Proxima Nova, Open Sans, Brandon Grotesque… just to name a few!

You might have asked – what are ‘web safe’ fonts? Web safe fonts are the pre-installed fonts on Windows and Mac systems. Whilst there were a lot of fonts on these platforms – if a user didn’t have that specific font on their computer whilst browsing a site, the font would then default to an alternative one.

webfonts_newfonts

Years ago, it was common to use a custom font in a design and convert that line of type; which was most probably turning a heading into a jpeg, png or even in Flash. This was time consuming and hard to update, and users with screen-readers had a hard time reading the headings. It was a struggle between great design and accessibility. Even when I did my first few websites and the client really wanted a custom font, this was the way to go.

Now there are a number of ways to add custom fonts to a website – (this is when you hear designers & developers cheer!)

@Font-face a CSS feature, is a solution in which the font file (for example .ttf & .otf) can be uploaded to a website, with files and font styles defined in CSS. When a user would land on the website, the font would ‘download’ to the browser. Most modern browsers support the @font-face feature. This is still a commonly used way to add custom fonts to a website when it may not have embedding options, like the ones I’ve mentioned below.

In 2008 Typekit.com launched a site that allows web designers & developers to easily add custom fonts to their website – hooray! After Typekit, several other companies began offering the same embedding service.

The great thing about these services is that there are now hundreds of custom website-friendly fonts. Designers can finally use the same fonts that matches their clients’ brand (if available – otherwise there is usually a font that’s pretty close to a match)! Say hello to consistency for projects from print to web – and better yet – you no longer have to worry about expensive licensing and browser issues. Typekit have a variety of plans to choose from: a free website version and a yearly subscription best utilised by designers, developers and agencies. Also, Typekit is now apart of the Adobe Suite of assets to be utilised by the Creative Cloud programs – which means there are now a wide range of fonts on Typekit that you can magically sync to your Photoshop, Indesign and more!logo_typekit

Google Fonts is another excellent option, offering a large library of fonts able to be quickly added to a website. An upside to Google’s platform, is that the service is completely free and the list of fonts are expanding rapidly.

logo_google_webfonts

Thanks for reading my short history of web fonts. We are also updating our portfolio part of our website – so keep an eye out!