skip to Main Content

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'>

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.



  1. Chosen as BEST ANSWER

    Found the answer here:

    In photoshop, click on

    Image -> Image Size

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

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

    letter-spacing: Xpx;
    Login or Signup to reply.
  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

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top