Converting font-size measurements from pt to px

[lel]

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!

[TeMc]

If your Photoshop-document is 72 dpi,

then pt == px.

So

Code:

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

would be just fine.

[AshtonSanders]

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,

[lel]

"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!

[bhargav]

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

[Beverleyh]

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

[bhargav]

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!

[Beverleyh]

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.

[Historical Forums User]

font-size conversion: calculator and chart

[Author]

Posts