In photoshop, my text size is 5.12pt and font type is Arial.
My base font size for my website is 13px/1.23 Arial.
How would I convert the 5.12pt size to the same size on web?
Thanks!
+1
A:
The following is a great tool I use: http://pxtoem.com/ It helps converting between different units and for different base sizes.
Just remember fonts are going to render cleaner in graphical programs than in the browser. I mean cleaner in the sense of smoothness, sharpness, and sizing.
Jason McCreary
2010-10-06 00:04:06
+1
A:
The pt to px ratio depends on your document's resolution.
I would start a new photoshop document with pixels and specify everything in pixels there.
Pekka
2010-10-06 00:04:29
Starting a new document will not help. Unless the default type unit is changed from `Edit > Preferences > Units and rulers` a new document will still use points, not pixels.
FreekOne
2010-10-06 00:13:30
+2
A:
Go to Edit > Preferences > Units & rulers (or Ctrl+K and choosing Units & Rulers in the list on the left) and change the default Type unit from Points to Pixels. While you're there, you can also change the Rulers unit to Pixels as well (although you can change that by right clicking on the rulers -- CTRL + R to enable them -- and choose the units type from there).
For web, make sure your document DPI is set to 72. You can check and set that from Image > Image Size... Once you do this, you can safely use the font size (in px) you have in your PS document for web.
Hope this helps.
FreekOne
2010-10-06 00:18:22
+1 for detailed info; however the document DPI should be meaningless, shouldn't it? Pixels are the only thing that matter when exporting to the web
Pekka
2010-10-06 00:21:01
@Pekka: On the contrary, actually, the DPI matters very much in this respect. As I answered in a related question, a point is equal to 1/72.27". If you are set at 72 dpi, 16 point is roughly equal to 16 pixels (72 * 16/72.27). At 300 dpi, which is what you should use for print, this would translate to roughly 67 pixels (300 * 16/72.27).
kcoppock
2010-10-06 00:30:10
@kcoppock no, an arbitrary DPI setting (dots per inch) inside the document does not matter at all for the use in a web image. The pixel dimensions are the only thing that matters. Your *monitor* has a dpi rate that will show the pixels (dots) in a physical dimension (inches). You have either a physical size that dpi will translate into pixels, or a pixel size that the dpi ratio will translate into a physical size
Pekka
2010-10-06 00:35:19
@kcoppock - Yes, you are correct. A document that is 800x600 at 72DPI translates to 3333x2500px at 300DPI. Any text and images contained in the document is resized as well. Also in the case of the OP, at 72DPI, a 5.12pt font would barely be readable if at all.
FreekOne
2010-10-06 00:36:09
@Pekka: try creating an 800x600px document at 72DPI and type something with a font of 12px. Then change just the DPI as I explained in my answer and have a look at the font's size ;)
FreekOne
2010-10-06 00:37:41
@Freek yes, but then it's not a 800x600 pixel document any more - you are altering the pixel dimensions of the image based on the dpi setting :) It's splitting hairs, but an important point between the worlds of print and web design.
Pekka
2010-10-06 00:39:15
@Pekka: I get what you're saying, and yes, pixels are the only relevant unit to worry about for web displayed images. However, the dpi of the document DOES matter when you are specifying point sizes during the creation of the image. The calculation of the pixel size is `(dpi * (points / 72.27))`, so the size will differ based on what you've told it is the dpi. You can try it for yourself, make a new document at 72 dpi, and type a word at 16pt font. Then, without resampling, set the dpi to 300, and type a new word at 16pt font. The size will be very different.
kcoppock
2010-10-06 00:40:46
@kcoppock yup, I get what you mean, too. The point is that `pt` is a value from the print world. It needs the dpi value to translate into pixels. You're right that the dpi value affects the pixel outcome when using point values for the font size - which is why one should use pixel units for this. I think we both mean the same thing.
Pekka
2010-10-06 00:43:17
@Pekka okay, then try creating an 800x600px document at 300DPI, and try exporting a part of it (like you would be slicing a layout) and see what size that image will actually be ;) That's why I'm saying that generally, when working on web layouts, it is important to use a 72DPI resolution.
FreekOne
2010-10-06 00:44:19
@Pekka: Agreed, I think so. It's just that using point sizes for text, even in Photoshop, is sort of the de facto standard. So as for David's question, the way I understood it was that he was trying to find a standard ratio between pixels and points. Just pointing out the dpi in case that was the source of his confusion. From working in print, though, I think the chance of anyone accidentally using 300 dpi instead of 72 is sadly, sadly low. :)
kcoppock
2010-10-06 00:48:28
@FreekOne: It will be 800px x 600px regardless of the DPI. Now if you create a 3" x 2" document at 72, and a 3" x 2" document at 300, the sizes will differ. A pixel sized image will always be that size in pixels, regardless of the DPI.
kcoppock
2010-10-06 00:50:12
@kcoppock - Yes, you are correct, again :) Got a bit confused there for a minute, my apologies.
FreekOne
2010-10-06 01:01:14
I guess what I was trying to say is, new documents for web layouts should be set at 72DPI as it prevents exactly this kind of confusion and one can safely use `pt` as type unit since it translates to roughly the same in `px` - phew ! :)
FreekOne
2010-10-06 01:09:30
I think we can all agree there, lol. :D Also, epically long comment thread!
kcoppock
2010-10-06 01:19:32
freekone, u mentioned "preferences" under "edit" i don't see that choice in photoshop. anywhere else it may be?
David Hsu
2010-10-08 03:13:34
FreekOne
2010-10-08 04:17:21