pixel size in photoshop different than pixels in HTML / CSS?

Question

I photoshopped a user interface for an app which I want to create. The width of the background of the photoshopped image was 640px and I typed in the app name using 24pt font. The app name took up about 1/3 of the width of the background.

I then created an html page and did

<div id=header'>
    <div id='logo'>
        <h1>appName</h1>
    </div>
</div>

and this was my CSS:

#header {
    width:  640px;
    background-color: red;
}

h1 {
    font-size: 24pt;
}

but when I do this, the app name only takes up like 1/8th of the 640px. Why does the HTML / CSS version look so much smaller compared to the photshop version even when I use the exact same pixels and font?

Note: I am using pt instead of px.

Answer 1

Found the answer here:

https://stackoverflow.com/questions/3868627/photoshop-pt-size-conversion-to-web

In photoshop, click on

Image -> Image Size

and make sure the DPI / Resolution is set to 72.

Answer 2

Maybe it's because of the spacing between letters? You could try and change it with style:

letter-spacing: Xpx;

Answer 3

Check if your Computer's display settings are too high which will affect display size in browser.

Go to Computer Display settings > Scale & layout - change this to 100% or recommended