How do you make coded HTML/CSS pages look as clean and smooth as their PSD/Sketch counterparts?

[TheOutlier1]

Hi,

I’m having trouble making my coded HTML/CSS pages look identical to my PSD/Sketch UIs.

I’m using the same fonts, font color, and everything.

But- notice the difference: http://i.imgur.com/O20Egqf.png

The bottom is cleaner, smoother, and bit more crisp.

What am I missing? Are there any CSS / Bootstrap elements or toolkits I should add to make my coded typography look better? Maybe there’s some sort of ‘smoothing’ CSS element involved? Could that be it?

Thanks in advance for any help.

[Lokesh]

You are never going to get sites to look the same in different browsers or operating systems, they are using different technologies all have different opinions on what is better etc etc.

You can try these -

    html {
        text-rendering: optimizeLegibility !important;
        -webkit-font-smoothing: antialiased !important;
        text-shadow: 0 0 0;
    }

Different browsers have different hacks. You may find these links helpful -
http://stackoverflow.com/questions/11459746/css3-webfont-smoothing-and-antialiasing-in-firefox-and-opera

[bluedreamer]

Indeed, what you create in an image editor will never look the same as in a web browser, that’s always been the case.

As @designerlokesh pointed out there are various “hacks” you can try but these will never reach every user, you have to remember that people use all combinations of operating system and web browser, and local settings (yes they can use different fonts to the ones you suggest!).

So the best approach with using image based design is to use that as an “ideal”, build your site as close to it as you can, and remember that not everyone will see it exactly the same. Don’t lose sleep over it, don’t fret about things not being pixel perfect. The most important thing is whether your sites visitors can find and understand your content. In reality most people couldn’t really give two hoots to how it looks, they care about whether they can complete a task or not (such as finding useful information).

[tenten71]

Honestly, it looks like you just need to play around with some line-height settings and maybe margins or padding settings.

There’s a big move towards designing in the browser and not in a graphic program right now. I only sort of agree with them. For client projects in which I send them 2 or 3 concepts, I do them in Photoshop and tell them that the final design will look slightly different (especially in different browsers and devices).

My own projects I just dabble in PS and then go straight to coding. But I’m not going to code 2-3 concepts for a client.

Tweak the CSS and you’ll get it close enough unless you’re using cutting edge CSS that isn’t supported by most browsers and then it will fall apart.