Photoshop Mock Up Font Isn't Same as in HTML

Photoshop Mock Up Font isn't same as in HTML

The short answer is "no". Photoshop has a lot more font functionality than a web browser. It applies all kinds of smoothing algorithms, and you can control kerning, tracking and spacing much better.

Each browser and OS has a distinct rendering engine as well, so even if you could get it the same in one browser/OS combination, it would look different in another.

However, check out all the CSS properties for text to see if you can get something you're able to live with. If not, your best bet is to just make an image out of your text and add it to your page with good "alt" text and such.

Font Size different in Photoshop to my HTML

HTML is not an image and cannot be treated as such. It is supposed to cope with multiple resolutions and screen sizes.

How are you going to handle someone resizing fonts on their browser?

Try different sizes, though using relative sizes and header tags (<H1> to <H6>) and style them with CSS would be the semantically correct thing to do.

Is there any reason not to use a custom font for icons on a web site?

Many websites use "icon fonts". But yes, assigning language letters to them would be wrong. It would be best to assign an arrow icon to the Unicode character code for a similar arrow. Another option would be to use the Private Use Area of Unicode. In this case, if your font fails to load for any reason, you won't have a good fallback strategy. But if you choose meaningful char codes for your icons, you would.

Many people are in favor of using SVGs over icon fonts. But there are pros and cons to both icon fonts and SVGs. I think that it's great that as web developers, we get to choose among different implementations or solutions to the same problem.

To answer your question, I would say that if done right, there is nothing wrong with using fonts for implementing icons.

As Mike 'Pomax' Kamermans put it:

"Fonts are for encoding vector graphics that are to be used in
typesetting context. That can mean letters, or icons, or emoji"

CSS font sizing, why it's not consistent

Points appear different on Photoshop and on Browsers.

Have a look at below articles:

1) PT difference between Photoshop and browsers: http://www.sherriwyche.com/tools/fontconversion.html

2) PT difference on different browsers:
http://css-tricks.com/css-font-size/

Fonts start to get blurry when smaller than 11px

Most browsers use the system's font rendering libraries, so most fonts will render slightly different on different operating systems. However, you can try using the 2 css3 properties listed below:

-webkit-font-smoothing: [ auto | initial | none | antialiased | subpixel-antialiased ]

This property only works with webkit browsers, like Safari and Chrome. See http://maxvoltar.com/archive/-webkit-font-smoothing for more on this.

font-smooth: [ auto | never | always | <absolute-size> | <length> ]

This is part of the W3C's CSS Font module specification. You can view the whole thing at http://www.w3.org/TR/WD-font/#font-smooth-prop . I am not sure whether any browser supports this property, yet. YMMV.

---

Related Topics