koobas.hobune.stream
Photoshop font size VS Unity font size
Hello there. Is there a ratio for "Photoshop to Unity" font size? I do a lot of UI sketches in Photoshop and when it comes to integrating assets et re-doing the typography in Unity there is a very big difference in point sizes (PT) between the two work environments.
I've done a few tests and it seems like 1 PT in Unity = 0.42 ... But it's not always the case. I can't believe there is a more efficient way to do this in Unity? Please advise. Thank you,
There is no magical ratio because you need to have some point of reference.
That said, you can definitely get 1:1 font sizes going. This is going to assume you're using the Unity screen space UI. When you create a new UI Canvas, open up the Canvas Scaler component and set the scale mode to Scale with Screen Size. Set the dimensions to whatever you're using in Photoshop.
Now, create a TextMeshPro UI object as a child. If you set the font size to your Photoshop one, it should align correctly. I've attached a screenshot example using Illustrator and a font size of 100.
The cool thing is that this also works with UI placement as well. With proper anchoring in Unity, you can easily set up UI down to the pixel point easily and quickly. Makes implementing external concepts a painless process, especially if you use something like Zeplin.
Thank you for the quick response! :) We are apparently already using these settings and still, there are some differences (small but still noticeable). I'll try and give you a test of our own soon ...
Could there be some confusion on our part linked to screen resolution? We are building applications for 4K screens but are using 1080p screens at our workstations... By default, I feel this wouldn't be a problem... but since Unity is a bit out of my usual playground, some unknown factors to me may come into play? Thanks again for these clarifications.
PS. I forgot to mention it in my previous post, but all my sketches in Photoshop are using screen size resolution ( 72 dpi ).
In Unity, you simply need to set the reference resolution in the canvas that matches what you're using in your Photoshop artboard. So, in my example I made a literal 1920x1080 artboard in Illustrator to get the exact points. However if for whatever reason I couldn't (such as wanting to do a 4k resolution), I would have to calculate the % difference to get the correct font size.
