Are there specific web font guidelines to use in Photoshop files for web design? I am having issues with line spacing and fonts not showing correctly in HTML.
I want to make sure my design will look on the web exactly as it does in Photoshop or InDesign
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.
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.
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-sizeby 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.
letter-spacing, especially on big headers. Bring them closer together ever so slightly.
- You can drastically improve readability by playing with
TL;DR Do not expect an exact match in PS and browsers, but do use the typographic tools CSS offers you.
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.