Geek Answers Handbook

Font looks different on photoshop and website

A simple question: why do these two fonts look different in Photoshop and on the website.

In this image, this is the first text from the html code, the second is the image from Photoshop. The same font, the same size - 30. But this first one looks more "bolder" than the second. What for? I want to have an identical font, as in Photoshop (second image).

Here's the css code:

@font-face { font-family: "SegoeWP"; src: url("fonts/play/SegoeWP.eot"); src: url("fonts/play/SegoeWP.eot?#iefix") format("embedded-opentype"), url("fonts/play/SegoeWP.woff") format("woff"), url("fonts/play/SegoeWP.ttf") format("truetype"), url("fonts/play/SegoeWP.svg#PlayRegular") format("svg"); font-weight: lighter; } #strona { width: 1120px; margin-left: auto; margin-right: auto; } #Section1 { font-family: "SegoeWP", Tahoma, Arial, sans-serif; font-size: 30px; } header, footer, article, section, hgroup, nav, figure { display: block; } body { font-family: "SegoeWP", Tahoma, Arial, sans-serif; background-image:url('background.jpg'); background-repeat: no-repeat; background-position: top center; color: #ffffff; }

And the html code.

  <section id="Section1"> { mywebsite.NET } </section> <img src="mojeportfolio.png" />

any ideas? Hello!

More details

I found that I have 3 types of SegoeWP font in the folder. "SegoeWP", "SegoeWP-Light", "SegoeWP-Semibold". "SegoeWP" looks too "bold", but this "SegoeWP-Light" is perfect and looks the same as in Photoshop when I double-clicked it. How can I use it on my website? When I change this part → url ("fonts / play / SegoeWP-Light. *"), Nothing changes on the website. What's wrong?

+7
source share
3 answers

Photoshop treats fonts much differently than a web browser ... because Photoshop uses features such as anti-aliasing, the kernel and others, the font will almost always look different in the browser.

+4
source

To get the same result, try using font-smoothing: antialiased and reduce the font size to fit your Photoshop image.

The biggest difference is that Adobe Photoshop will not do sub-pixel smoothing fonts - unlike most browsers. In your example, the image is easily visible if you zoom in (see Color is shifted around the edges). Windows has a history of using an additional clear form of sub-pixel font rendering, which exacerbates the problem, as the perceived font weight can change dramatically.

Smashing Magazine has an excellent article on font rendering.

+4
source

Make sure you add css to the right place, sometimes this can be a problem. Full notes on how to reduce font weight can be found here:

http://www.w3schools.com/css/tryit.asp?filename=trycss_font-weight

-2
source

More articles:


All Articles