This PSD file will demo Photoshop text support vs. native environment text support for fonts, font styles and font pixels. This PSD will teach you the
fundamental truth behind text and font rendering across browsers and devices – they are not the same!
IMPORTANT: Test this PSD in each environment and various browsers to note the difference in font support.
CSS Fonts in Browsers
All fonts are not created equal, each browser will render fonts differently. Using
Arial font (a very common font), your output will still look different when using IE, Chrome and FireFox.
Each browser and device uses its own character ranges and glyphs to render fonts. Each browser and device will also add its own default settings to each font, such as
font-weight, which can be very different in each.
Testing the PSD
Use Layers views to see the code translation of each layer, or use Exports view to see the output of the document. Test with IE, FireFox and Chrome to show you how each browser treats fonts and text when they render content, it may shock you.
RED TEXT: An image copy of the text layer BLACK TEXT: Your rendered text in the browser
Using Exports View
Export the PSD in your required environment to see how shapes are rendered in your output.