Join Chris Converse for an in-depth discussion in this video Variations in web browser text rendering, part of Design the Web: Simulating Web Text.
- View Offline
Now if you've ever paid close attention to the way fonts look inside of different devices and platforms, you'll notice that the edging on the fonts or the anti-aliasing looks different in all of these different devices and platforms. This is because each browser and each device has its own way of representing the shape of a font family. So what I've done here is taken the final HTML from this project, which is part of the Responsive Web Design course, and screen captured all of these different devices and platforms so that we can compare the anti-aliasing. On the right-hand side here, we can see the five most dramatic differences in the anti-aliasing.
So as I go through all of these examples, you can see how different the anti-aliasing looks across all of these different browsers. And when we compare all of these together, you can see that every browser has a slight variation from each other on how they render these fonts. Now what we're going to cover next in Photoshop is how we can change the anti-alias settings so you can more closely represent the text in Photoshop to match what your client is expecting to see in their chosen web browser.