2

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.

Improve this question
3
  • 3
    You should be designing in the browser if you are worried about fonts.
    – user9447
    Commented Aug 25, 2014 at 0:04
  • @D.Coleman part of the success of the fonts dependes of the server, the fonts it has installed and all that. I think you can take a look at the google web fotns project. It can be useful for you.
    – Aradnix
    Commented Aug 25, 2014 at 1:40
  • 4
    If the question is about pixel perfect font rendering between photoshop and website... The guidelines are: "Let it go". It matters so little but it can drain so much of your time. Your client is the only person to see that difference and likely won't even notice or care. There's more... Every browser renders fonts differently too. You don't want to step into that swamp. No one cares and you shouldn't either.
    – Joonas
    Commented Aug 29, 2014 at 8:42

4 Answers 4

Reset to default
6

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.

Improve this answer
4

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.

Improve this answer
4

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.

Improve this answer
1

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.

Improve this answer
1
  • I tried running my Photoshop file through the app you mentioned and it did find the issues that I was already fixing myself - thank you!
    – D. Coleman
    Commented Aug 24, 2014 at 22:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.