FREELessons: 17Length: 2.6 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.1 Cross-Compatible Type

Hey, welcome back to Bombproof Web Design. In this lesson, you're going to learn about cross compatible type. There are a few problems that you can run into between different operating systems and also between different browsers. In web design, there are two different kinds of fonts. You have your operating system level fonts. So, these are fonts that are pre-installed on your machine when you get them. There are different fonts for different operating systems that are there by default. On top of that you also have Web fonts. These are traditional font families provided by services like Google fonts, for example, or Typekit or Font Squirrel and so on. And each of these different types of fonts can pose different issues that you need to know how to work around. The main potential problems that you'll need to be aware of that can come up, are different or poor web font rendering. On one browser on one operating system, you might see a web font render looking one way, and then it can look completely different on another browser. Another program you can run into is missing operating system level fonts. If you choose a font for your site that's only available on one operating system you're gonna have issues with how it displays on other operating systems. You can also run into similar problems with web fonts, where web fonts don't load or are not supported properly. That can also affect icon fonts. Where instead of using images to create fonts on your site, you actually use a particular kind of font family. We're gonna get started by looking at the differences in the way web fonts can be rendered between one operating system and another. What you're looking at here is some text with a font from the Google fonts service applied to it. We're looking at the Changa One font. And we are looking at this font in Chrome running on OS X. As you can see, everything renders fairly smoothly. The font looks fairly nice. There's no obvious pixelation or odd effects. And this is a second font. This one is the Lemon font, and again, you can see that it renders really quite nicely inside Chrome running on OS X. So now let's have a look at the same fonts inside Chrome running on Ubuntu. This is the same Changa One font inside the same browser but this time running on Ubuntu, and you can see that the white of the font is quite different. It's still smooth around the edges, but the same weight, the same default settings give you quite a different appearance. So if you decided to use a font like this you would have to reduce the font weight settings or if you found that you weren't able to create a readable display with this text you might have to choose a different font. However, the lemon font on Ubuntu. In the same browser, looks quite nice. So this would be an example of a font that you could successfully deploy to Chrome on Ubuntu and OS X. But now, let's have a look at the same font again running still inside Chrome, but this time on Windows. Here we are inside Chrome and this time we are running on Windows. So again this is the same browser but just because we are in a different operating system the way that the operating system in this particular browser interact with one another means that you have a fairly rough display of this particular font. As you can see there's a lot of jagged edges and artifacts. So you really wouldn't be able to deploy this font to Chrome Windows and have a very good looking display. Now mind you the same font will look quite nice on IE, on Windows and on Firefox on Windows. It's just the problem that you have with Chrome on Windows. And this is quite ironic given that the only browser that won't display Google's fonts well on Windows is Google's own browser. As far as I'm aware, the Chrome team are aware of this. There's been talk about a resolution for quite some time but it hasn't materialized yet. Perhaps it will in the future, but for now this is just something that you'll have to be aware of. What you wanna do is check your fonts in as many different browsers on as many different operating systems as you can. And try to find the ones that look the best on those set ups, where you might have seen problems with particular fonts. And you can see the same thing applies here with this lemon font. Again, you've got a fair bit of artifacting, a fair bit of jagged edges, and it's overall, it doesn't come up looking very nice. Now, the other thing to be aware of is that most of these fonts will also smooth out at a higher font size. So we're looking at a 36 pixel font size here. If you increase that to above 40 most of these web fonts will smooth out even in Chrome on Windows. And you'll also find the most problematic fonts for this particular issue are thicker typefaces. You wont see as much of the pixelation and the jagged edges on lighter weight fonts. The next issue to be aware of is operating system's specific fonts. Here we have a little bit of text running on Mac with the Helvetica Neue font applied. This particular font is something that you'll see a lot of people using, however, it is a Mac only font by default. If we take a look at this same text in Windows. You'll see that you don't have the same type of font formatting applied. The same is also true in Ubuntu, where again, because the Helvetica Neue font family is not available in the system, it's not able to be applied to the text in question. So what do you do about that? Well, the first thing to do is not to base your design around a font that's likely to only appear on one operating system. Generally speaking, you'll find that the fonts are considered safe for use on Windows machines are also gonna be available on Mac. And even though Ubuntu systems by default don't come with anything other than free open source fonts. They also have a package available to install the Microsoft core fonts. Fonts that are commonly seen on the web, such as Arial or Impact, or Times New Roman, are very often installed on Ubuntu machines, as well as Windows and Mac machines. That said, you can also go a step further and make 100% sure that your going to have font formatting that has close to what you are aiming for in your design style. As possible, by using what's called Generic font families. Generic font families allow you to specify a particular style of font rather than a specific font family. These generic font settings will work on any system, no matter what fonts it has available. Let's have a quick look at the effect of these settings on Mac, Windows and Ubuntu. So here we have each of these five generic font family settings, as they appear on Chrome, on a Mac. So you've got your Serif font, Sans Serif, Cursive style, Fantasy style and Monospace. And because the different setup can fill in whatever font it thinks is going to best represent the fantasy setting or the monospace setting. Your gonna get a different appearance on different system. Here we have the same page this time running in Internet Explorer on Windows. Again we have the Serif and Sans Serif display. However you can see the Cursive display and Fantasy display look quite different on a Mac. And now on Ubuntu, again we have the Serif display, Sans Serif, Cursive, Fantasy, and Monospace. So Ubuntu hasn't done quite as good a job styling with the Cursive or Fantasy font. But this is an absolute default installation of Ubuntu. If there were more fonts available on the system, more fonts installed on the system, you were to find different fonts applied to these two settings as well. As well as having missing operating system level fonts, you can also encounter problems with missing web fonts. You saw earlier this lemon web font coming from the Google font service. This is how it's supposed to look. However on opera mini, which doesn't support at font face, which is the property used to make this font work. This is what you get. You get a complete absence of font formatting all together. This problem combined with the potential issue of missing operating system level fonts means that you always want to use what's called a Font Stacks. A font stack is a list of fonts in your order of preference. You enter your preferred font first and then you follow it up with fallbacks. For example, if you want to use Helvetica Neue in your design, but you're aware of the fact that it might not be available on all systems, you can also provide Arial as a fall back. And then as another level of fall back, you can also provide that generic font family that we just discussed. This way you're pretty safe. Even if none of the fonts that you've specified are available, you're going to have the generic font family available. And you can do that for each of your font specifications. In this example, I have said that I wanna use the lemon font. And then I'm falling back to the fantasy generic font family. Now, I've deliberately not loaded in the Lemon font family so you can see how this all looks on different setups. In Chrome on Mac, we have the Lemon font, which is deliberately not being loaded in, replaced by this generic font family. And the Helvetica Neue family is successfully loading in. In IE on Windows. Again, you can see a different font being chosen to act as the generic font family. And in this case, Arial is loading in. And finally, in Ubuntu, you can see there are also generic fonts being loaded in, due to the fact that neither Helvetica Neue nor Arial are available on this system, and Lemon is not being loaded in on the header. The last area that you could find yourself with problems due to missing webfonts is if you decide to use font based icons. This is the website for Font Awesome, one of the most popular libraries of font icons. And you can see all the little font based icons showing up here. These have a lot of advantages over just using images for your fonts. They can be faster loading, they're flexible in size and you can recolor them just by using CSS. However, due to Opera Mini not supporting at font-face, users will not see these icons on Opera Mini. What they'll see instead is just little blank squares where the icons are supposed to be. So there's not much you can do about this in terms of providing a fall back. It doesn't really matter how you go about loading up your web fonts. If you're trying to use icon fonts on opera mini, they're just not going to show up no matter what you do. So if you are going to be supporting opera mini, you will have to provide image fall backs. So that's where you can use modernizer, as we discussed earlier, to detect whether or not Font face is available on the system. And if it's not then you could use CSS to load up images instead. Or you can use the approach whereby you say Opera Mini is not supported. And you can use the methods that we discussed earlier to let the user know that they won't be able to browse your site effectively using Opera Mini. In the next video you'll learn how to use the newest CSS properties and future proof your code using CSS preprocesses and vendor prefixes.

Back to the top