Points to Pixels

Here’s a chart that converts points to pixels (and ems and %). It’s
an approximation, which will depend on font, browser and OS, but it’s a
good starting point.

  <th>
    Pixels
  </th>
  
  <th>
    Ems
  </th>
  
  <th>
    Percent
  </th>
</tr>

<tr class="on">
  <td>
    6pt
  </td>
  
  <td>
    8px
  </td>
  
  <td>
    0.5em
  </td>
  
  <td>
    50%
  </td>
</tr>

<tr class="off">
  <td>
    7pt
  </td>
  
  <td>
    9px
  </td>
  
  <td>
    0.55em
  </td>
  
  <td>
    55%
  </td>
</tr>

<tr class="on">
  <td>
    7.5pt
  </td>
  
  <td>
    10px
  </td>
  
  <td>
    0.625em
  </td>
  
  <td>
    62.5%
  </td>
</tr>

<tr class="off">
  <td>
    8pt
  </td>
  
  <td>
    11px
  </td>
  
  <td>
    0.7em
  </td>
  
  <td>
    70%
  </td>
</tr>

<tr class="on">
  <td>
    9pt
  </td>
  
  <td>
    12px
  </td>
  
  <td>
    0.75em
  </td>
  
  <td>
    75%
  </td>
</tr>

<tr class="off">
  <td>
    10pt
  </td>
  
  <td>
    13px
  </td>
  
  <td>
    0.8em
  </td>
  
  <td>
    80%
  </td>
</tr>

<tr class="on">
  <td>
    10.5pt
  </td>
  
  <td>
    14px
  </td>
  
  <td>
    0.875em
  </td>
  
  <td>
    87.5%
  </td>
</tr>

<tr class="off">
  <td>
    11pt
  </td>
  
  <td>
    15px
  </td>
  
  <td>
    0.95em
  </td>
  
  <td>
    95%
  </td>
</tr>

<tr class="on">
  <td>
    12pt
  </td>
  
  <td>
    16px
  </td>
  
  <td>
    1em
  </td>
  
  <td>
    100%
  </td>
</tr>

<tr class="off">
  <td>
    13pt
  </td>
  
  <td>
    17px
  </td>
  
  <td>
    1.05em
  </td>
  
  <td>
    105%
  </td>
</tr>

<tr class="on">
  <td>
    13.5pt
  </td>
  
  <td>
    18px
  </td>
  
  <td>
    1.125em
  </td>
  
  <td>
    112.5%
  </td>
</tr>

<tr class="off">
  <td>
    14pt
  </td>
  
  <td>
    19px
  </td>
  
  <td>
    1.2em
  </td>
  
  <td>
    120%
  </td>
</tr>

<tr class="click">
  <td>
    14.5pt
  </td>
  
  <td>
    20px
  </td>
  
  <td>
    1.25em
  </td>
  
  <td>
    125%
  </td>
</tr>

<tr class="off">
  <td>
    15pt
  </td>
  
  <td>
    21px
  </td>
  
  <td>
    1.3em
  </td>
  
  <td>
    130%
  </td>
</tr>

<tr class="on">
  <td>
    16pt
  </td>
  
  <td>
    22px
  </td>
  
  <td>
    1.4em
  </td>
  
  <td>
    140%
  </td>
</tr>

<tr class="off">
  <td>
    17pt
  </td>
  
  <td>
    23px
  </td>
  
  <td>
    1.45em
  </td>
  
  <td>
    145%
  </td>
</tr>

<tr class="on">
  <td>
    18pt
  </td>
  
  <td>
    24px
  </td>
  
  <td>
    1.5em
  </td>
  
  <td>
    150%
  </td>
</tr>

<tr class="off">
  <td>
    20pt
  </td>
  
  <td>
    26px
  </td>
  
  <td>
    1.6em
  </td>
  
  <td>
    160%
  </td>
</tr>

<tr class="on">
  <td>
    22pt
  </td>
  
  <td>
    29px
  </td>
  
  <td>
    1.8em
  </td>
  
  <td>
    180%
  </td>
</tr>

<tr class="off">
  <td>
    24pt
  </td>
  
  <td>
    32px
  </td>
  
  <td>
    2em
  </td>
  
  <td>
    200%
  </td>
</tr>

<tr class="on">
  <td>
    26pt
  </td>
  
  <td>
    35px
  </td>
  
  <td>
    2.2em
  </td>
  
  <td>
    220%
  </td>
</tr>

<tr class="off">
  <td>
    27pt
  </td>
  
  <td>
    36px
  </td>
  
  <td>
    2.25em
  </td>
  
  <td>
    225%
  </td>
</tr>

<tr class="on">
  <td>
    28pt
  </td>
  
  <td>
    37px
  </td>
  
  <td>
    2.3em
  </td>
  
  <td>
    230%
  </td>
</tr>

<tr class="off">
  <td>
    29pt
  </td>
  
  <td>
    38px
  </td>
  
  <td>
    2.35em
  </td>
  
  <td>
    235%
  </td>
</tr>

<tr class="on">
  <td>
    30pt
  </td>
  
  <td>
    40px
  </td>
  
  <td>
    2.45em
  </td>
  
  <td>
    245%
  </td>
</tr>

<tr class="off">
  <td>
    32pt
  </td>
  
  <td>
    42px
  </td>
  
  <td>
    2.55em
  </td>
  
  <td>
    255%
  </td>
</tr>

<tr class="on">
  <td>
    34pt
  </td>
  
  <td>
    45px
  </td>
  
  <td>
    2.75em
  </td>
  
  <td>
    275%
  </td>
</tr>

<tr class="off">
  <td>
    36pt
  </td>
  
  <td>
    48px
  </td>
  
  <td>
    3em
  </td>
  
  <td>
    300%
  </td>
</tr>

Points

출처: http://www.reeddesign.co.uk/test/points-pixels.html

  <td width="20%">
    &nbsp;
  </td>
  
  <td width="105">
    <a href="http://www.reeddesign.co.uk/webdesign/index.html" onmouseover="chgImg('webImg','webOn')" onmouseout="chgImg('webImg','webOff')" onfocus="chgImg('webImg','webOn')" onblur="chgImg('webImg','webOff')"><br /></a>
  </td>
  
  <td width="20%">
    &nbsp;
  </td>
  
  <td width="93">
    <a href="http://www.reeddesign.co.uk/avdesign/index.html" onmouseover="chgImg('avImg','avOn')" onmouseout="chgImg('avImg','avOff')" onfocus="chgImg('avImg','avOn')" onblur="chgImg('avImg','avOff')"><br /></a>
  </td>
  
  <td width="20%">
    &nbsp;
  </td>
  
  <td width="70">
  </td>
  
  <td width="20%">
    &nbsp;
  </td>
  
  <td width="48">
    <a href="http://www.reeddesign.co.uk/kites.htm" onmouseover="chgImg('kitesImg','kitesOn')" onmouseout="chgImg('kitesImg','kitesOff')" onfocus="chgImg('kitesImg','kitesOn')" onblur="chgImg('kitesImg','kitesOff')"><br /></a>
  </td>
  
  <td width="20%">
    &nbsp;
  </td>
  
  <td width="51">
    <a href="http://www.reeddesign.co.uk/links.htm" onmouseover="chgImg('linksImg','linksOn')" onmouseout="chgImg('linksImg','linksOff')" onfocus="chgImg('linksImg','linksOn')" onblur="chgImg('linksImg','linksOff')"><br /></a>
  </td>
</tr>