Is it correct to transfer pixel dimensions from Photoshop to layout?

Question

css

Good day to all!
When laying out a layout from psd, I encountered the problem of incorrect display in the browser (comparing in appearance), provided that the dimensions of the layout are accurately transferred pixel-by-pixel directly to the layout.
Questions:
1) Is it correct to typeset by measuring the PSD of the layout (padding, width, height) and then transferring the dimensions to styles, or is it still just to be oriented "by eye"?
2) How to correctly calculate the font size (what would be displayed on the site in accordance with the layout, without any tedious selection "by eye")?
Thanks in advance for your reply.

Answer 1

You rarely come across designs where it is easy to make all fonts in em and align everything clearly through pixel perfect. If the technical specification does not require it, font sizes can be set in pixels, some global indents and widths can be measured with a ruler in Photoshop, then after everything is laid out, adjust it through Pixel Perfect (Firefox or Chrome).
That is, you make the frame / layout of the elements, and only then align everything. Do everything pixel by pixel at once - it will take more time.
ps: for Firefox there is a version of Pixel Perfect 1.8.1 (working without glitches), which is hidden in the versions of the Pixel Perfect plugin on addons.mozilla.org.

Answer 2

Font sizes are indicated in relative values, from the stupa as a percentage. You throw it over your eye, then take a picture of what you are typing and absolutely position it over what you have. Set the image to transparency and adjust the layout to the layout

Answer 3

Fonts have invisible areas at the top and bottom. This is easy to see by simply highlighting any line with the cursor. Therefore, you can easily make a mistake in determining the vertical font indents, if you simply measure the distance from the edge of the letters. You can check your work as Nikita
recommended . Moreover, there are browser plugins for this. For example, for Chrome I used Pixel Perfect

Answer 4

The formulation of the question is not entirely clear - what exactly are the differences?
Offhand, I can only assume a problem with vertical indents - which need to be measured not directly to the letters, but to the line boundaries (which depends on the font point and line-height). But this is not a bug, but a feature.
In general, measuring sizes according to the layout and taking font pixel sizes from there is normal.
But you need to know and make adjustments for a few layout and typographical nuances.