Quantcast
Channel: Silicon Beach Training Blog » InDesign
Viewing all articles
Browse latest Browse all 13

Tantalising Typography: Using Web Fonts in 2013

0
0

It’s 2013, it’s time to ditch Arial and embrace modern Web Fonts. That’s what we’ll be doing later this year when we launch our new site, and so I thought it would be a good time to revisit web fonts and explore the huge range of options we now have for beautiful typography on the web. As an example of the freedom this gives designers, here’s Creighton Pro: a font which may or may not be appearing on a certain site this year . We hope you like it!

Creighton Pro

Until recently, web designers were limited by the fonts they could use online. Fonts had to be installed on a user’s computer which meant sticking to one of a limited selection of ‘web-safe’ fonts including Arial, Courier New, Times New Roman, Comic Sans, Impact, Georgia, Trebuchet, Webdings and Verdana. These are the fonts that Microsoft included in their Core fonts for the Web initiative in 1996 and are still the most commonly used web fonts to date. Look at the graphic below and I’m sure you’ll be familiar with all of them:

Microsoft Core Web Fonts

Thankfully, due to ever expanding web font libraries and almost complete browser support, you can now pick from thousands of fonts to ‘make the web beautiful’ (Google’s words, not mine).

Finding & Using Web Fonts

Web Font Libraries

Google and Adobe lead the way when it comes to Web Fonts, partnering to provide the most comprehensive and stable libraries on the web. Google currently has 629 font families – all available free. Adobe offers two services – Adobe Edge Web Fonts (free) and Typekit (paid). Google & Adobe share many of the same fonts so if you want the free option go for Google Fonts but if you want a larger library and more support then Typekit is the better option.

Web Font Libraries

Web font libraries make it incredibly easy to choose and font and start using it with little hassle.

Using Google Fonts you can use filters or search to find exactly the font you’re looking for and then follow the instructions to add the font to your site. Because the font is stored online by Google you don’t even have to download the font – you just add a line of code in the <head> of the HTML to tell the browser where the font is stored and then update your CSS to include your new font.

Google Fonts also allows you to download every font in their library to use in Photoshop mockups or to test different fonts – for free! On our InDesign courses you will learn how to set up paragraph style sheets - then all of your documents can match your web fonts exactly.

Using Custom Web Fonts

Sometimes, 629 fonts just aren’t enough. Let’s say you stumbled across a particularly attractive font online that isn’t part of Google’s library. Or, you hired a typographer to create your own branded fontyou could even learn to do this yourself after attending an Illustrator course.

When you want to use a font that isn’t part of a web font library you update the HTML and CSS on your site the same way as above. The only thing that changes is that you need to host the font on your remote server.

Problems with Web Fonts

Fallback Fonts

It’s still worth adding fallback fonts to your CSS, just in case. The browser will go through each font and serve up the first one it can. You should always have at least one of the core web fonts (Arial) and then a generic font family (i.e. sans-serif).

Internet Explorer

As with everything developed for the web in the past 10 years, there are issues with older versions of Internet Explorer not recognising weights on fonts (among other reported issues).

internet-explorer-web-font-problems

To fix this, follow Kristen Grote’s advice.

Using Text as Images

If you don’t have control over the design of your site, but still want to use more interesting fonts in your content, then you always have the option of using a program like Photoshop to create text as graphics (like at the top of this post).

While this works fine from a design perspective, it’s not ideal for use on the web if you’re going to be doing it a lot. Most people will be able to read this text but machines won’t, causing accessibility problems and issues for search engines crawling your pages.

A mistake we’ve seen a lot is using images instead of headers. If you go down this route then you can’t expect to show up in search engines for your key phrases. We always recommend using <h> tags – they will always be one of the clearest signals to search engines as to what your content is about.

The post Tantalising Typography: Using Web Fonts in 2013 appeared first on Silicon Beach Training Blog.


Viewing all articles
Browse latest Browse all 13

Latest Images

Trending Articles





Latest Images