CSS Font Size for Image/Text
- Started
- Last post
- 12 Responses
- mg33
Is it unreasonable for me to think that an image containing only text created in Photoshop, at font size 18px / Smooth, no faux bold can match the exact look of a web font - same font - with CSS set to the exact same font settings? I don't have an example at the moment, but before I drive myself crazy with trial and error, just curious if I'm attempting something impossible.
The short of it: Font in CSS at 18px is not matching the size of font in image from Photoshop at 18px.
- Continuity0
For the purposes of PS-to-CSS, you have to go on a few assumptions:
• PS document is set to 72dpi (caveat: unless you're designing for retina)
• PS pts = CSS pxThis is pretty much as close as you'll get to matching fonts sizes from PS doc to web browser.
Hoooooooowever ... PS's anti-aliasing settings won't match the browser(s) precisely.
- mg330
Thanks. You are probably right. The only strange thing is that I can't figure out why my font has something like font-weight: bold applied. I've looked everywhere and cant' figure out why it's thicker than the web bold version.
- Continuity0
Have a look to see what the anti-aliasing definitions are in your @font-face stack is, if any. That's probably where the problem lies.
- mg330
Thanks. I'll take a look. Working with this BTW
https://processtypefoundry.com/f…
- Continuity0
Try this in your @font-face stacks:
font-style: normal;
font-weight: 600;
-webkit-font-smoothing: antialiased;That _should_ do the trick and make the type look the way it should.
Also, that's a lovely font.
- mg330
Thanks again. Wish I could show what I'm working on, but will post eventually. I knew that font was exactly what I wanted when someone posted it.
- Continuity0
OK, but did it work?
- mg330
- Continuity0
If that's in-browser, it's already not bad at all.
- Just seems like the weight is thicker than the examples in http://processtypefo…, although might just be my eyes.mg33
- Continuity0
In all fairness, Process Type themselves recommend the bold weight be used at 22px and above, for best results, right there on the specimen page. If you go below that, I suppose you're at the mercy of the browsers and OSes.