Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Other Converting font-size measurements from pt to px

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #26761
    lel
    Member

    How do I convert font sizes from points into pixels? For example, I received a PSD file with a font-size of 13PT and a line-height of 18PT. What are those values in pixels? I’ve seen the conversion calculators online, but I am not sure I’m A. using them correctly and B. can trust the results. Hopefully someone can offer up a solution and possibly a way for me to finally make sense of this concept.

    Thanks!

    #66558
    TeMc
    Member

    If your Photoshop-document is 72 dpi,

    then pt == px.

    So

    Code:
    font-size: 13px; line-height 18px;

    would be just fine.

    #66614
    AshtonSanders
    Participant

    ooooh, good to know.

    I had one client by me a clear ruler so I could measure my screen with her on the phone and move things around by millimeters… lol

    Thanks,

    #66562
    lel
    Member
    "TeMc" wrote:
    If your Photoshop-document is 72 dpi,

    then pt == px.

    So

    Code:
    font-size: 13px; line-height 18px;

    would be just fine.

    Thanks TeMc! You just made my day!

    #244004
    bhargav
    Participant

    Hi,

    In the photoshop file, it has 72 dpi, width 754px height 1500px (iphone 6 canvas size). The text size which has been used is 28 PT and when we see it in mobile view/device view tool of photoshop, it looks normal.
    But, for web 28PT which could be similar to 28PX is way too large font-size.

    Is there any article or guide to help making proper font-size or typography while designing it ? or Any guide to choose font size for web out of these photoshop file?

    Thanks in advance!

    Best,

    Bhargav

    #244005
    Beverleyh
    Participant

    This conversion chart may help http://reeddesign.co.uk/test/points-pixels.html

    #244007
    bhargav
    Participant

    Hi Beverleyh,

    This chart only coverts PT to PX; I have little bit a different query here.
    What type face or font size should designer use while designing; making sure that while converting PSD to HTML, the font size should be same (esp. for responsive design).

    Thanks!

    #244021
    Beverleyh
    Participant

    This chart only coverts PT to PX

    And % and ems

    What type face or font size should designer use while designing

    For main body text, something clear, easy to read and at a reasonable size (taking into account line length, font weight and context). Most browsers default to 16px/1em so stick with that or something close – unless you’re designing for an audience that requires larger, but you should know that based on your design brief or user profiles. For desktop, try not to go smaller than around 15px, or maybe 14px at a push if you’re using something like Verdana. On mobile you can usually go a bit smaller due to comfort and screen proximity. Then again, on med-large desktop, a layout that’s been capped at 1280px width with 16px/1em copy, will look small on a 1920px monitor, so some upscaling may be called for, which could easily see 16px/1em increase to 24px/1.5em to better fill the screen. There’s more to consider than a font-size that’s been hardcoded into a static PSD layout and I’m not sure that you can do an easy direct equivalent like that from Photoshop, or any other graphic design software. I don’t design websites in Photoshop a great deal anymore but when I do (and they’re more for a “flavour” than a set in stone finalisation), I take the sizing as a general approximation and instead rely on real life testing on a variety of devices.

    My advice would be to do some research into “typography in responsive web design” and base your font-size/type-face choices on your findings there.

    #253547
Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘Other’ is closed to new topics and replies.