: Will my web site's type in the web browser look exactly as it does in Photoshop? Are there specific web font guidelines to use in Photoshop files for web design? I am having issues with

@Heady304

Nope. Maybe. Probably not.

First of all, for the people in doubt, you most certainly can use webfonts in Photoshop, if you're able to download the required font formats. This allows you to get an idea on how your type is going to look on the web, not an exact representation.

Why? Well, simply put Photoshop and InDesign offer some tools that browsers do not offer yet. Most importantly, browsers lack a good, versatile anti-aliasing algorithm for text. Adobe's products will automatically smooth out thin lines, whereas browser may render them jaggy. Even more frustrating is that these inconsistencies are quite inconsistent themselves; text can look marvelous in Firefox but butt-ugly in Chrome.

So, 100% match? Forget it. However, here are some general tips to make your fonts look better online:


Thin lines looking jagged? Change your font-size by one pixel.
Alternatively, add a tiny text-shadow (<1 px) to your text. Will make your text look a very teeny tiny little less crisp, but tweak this enough and it will look better than ever before.
Use letter-spacing, especially on big headers. Bring them closer together ever so slightly.
You can drastically improve readability by playing with line-height.


TL;DR Do not expect an exact match in PS and browsers, but do use the typographic tools CSS offers you.

Vote Up Vote Down

@Holmes874

I want to make sure my design will look on the web exactly as it does in Photoshop or InDesign


You can't.

The reason is that there is no one 'exact' way your site will work on the web to begin with. Every browser, every operating system, every end-user preferences, every screen, every hardware will bring to the table some variance.

This is why so many people suggest you don't design web sites fully in Photoshop anymore and instead use Photoshop as a sketching tool, but get your design into markup and CSS as soon as you can. This allows you to design with the variability rather than fight it.

Vote Up Vote Down

@Shakeerah625

Little surprised by some of these responses not addressing the bigger issue.... Unless I'm totally missing something here...

Asking if Photoshop will or won't work with web fonts is like asking if you can surf big waves in your Honda Civic. They're not even the same realm.

ANYTHING you do in PS, at some point, is gonna be spit out as an image of some kind. At that point, fonts working or not working is completely moot. They're just pixels then. It's exactly why Adobe Muse exports non-web-safe fonts as images.. because of course they'll show up. Doesn't matter if it's Helvetica or the most hideous obscure free display font you've ever seen, it'll wind up as pixels in PS.

Now, if you're just talking for the sake of mockups, then yes, keep it to web safe stuff when in PS. Even if you're unsure, when you go to start designing and you have something non-web-safe, just use Google Fonts or TypeKit or something to find a suitable replacement.

Vote Up Vote Down

@Sarah814

There are web safe fonts and online font resources you can reference, and technologies for web typography using fonts change quickly and so are guidelines. I tried using Web Preflight (https://www.oss-usa.com/web-preflight?promo=web-preflight) for initial pass on Photoshop web designs, works pretty well.

Vote Up Vote Down