Hey guys,
A question regarding iPad fonts. Apple Human Interface guidelines specifies font sizes at :
“Point size based on image resolution of 144ppi for @2x.”
Figma iPad 11” Frame is set to 1194 x 834 which is half the size of actual screen pixel density.
It means when I am using large title 34p font in Figma it is twice as big!?
So what do you do? I think scaling font is not a good idea. I can scale the frame, but again everyone recommends to work at @1x
Any ideas?
Thank you
Best answer by ntfromchicago
Got it. So using Large Default is perfect in Figma.
You are correct. Figma does not support dynamic type.
The points they give in the chart are pixel independent. Meaning in iOS the body size is always 17 points tall.
In pixels, that is dependent on the device but optically, it will still measure on a ruler as 17 points tall. Just with a greater pixel density (so it’ll look super sharp). It’s confusing because of that gray note at the bottom that is more for folks who are designing in Photoshop or some other image editor that relies on image resolution (ppi) to size things properly.
For the purposes of handoff to developers, I would just name your text styles to match the iOS conventions: Headline, Body, Callout, etc. and then tell them to ignore the numbers you use if you are NOT designing at 1x. If you’re supporting Dynamic Type in your app, your devs won’t care what numbers* you use and will just want the correct style to implement.
*The exception is if you are making any text that stays the same fixed size regardless of Dynamic Type; then you would have to give them the correct size of the font @1x.
Hope this all helps. I am not sure I am helping with my responses as we might be talking about two different things in Figma.
So is is basically Figma default template is wrong ?!
The 11 inch iPad Pro display is 1194 pt x 834 pt at 2x resolution. In pixels that is 2388 px x 1668 px.
The Figma default template is correct @1x. The size (points) in the HIG is also @1x. So Large title would also be 34pt at 1x.
If your question is “Should I design in 2x or 3x instead” in Figma … I would not recommend either but if you do, you’ll have to double or triple all the point sizes in the HIG chart in Figma.
Hi @ntfromchicago thank you for your reply.
I am asking this question because of the note given in HIG regarding font size being in 2x.
Also if you take iPad screenshot and import into Figma and measure one of the “Titles” they are exactly Large Title 34p in size.
So if using 1x template from Figma I will have to use Headline or Body style instead. (17p)
Is it what you do?
This way, using body instead of Large Tile will create a lot of questions from developers
Anyone?
So say you start using Apple Fonts as x1. And instead of Large Title you are using Body.
You hand your design to developers and they will use size 19 which is obviously wrong as Xcode and SwiftUI respects x2 resolution of the device and all text will be smaller.
Sorry for the delay in replying. So … iOS is different because of Dynamic Type. Which means that the font sizes you give a developer will change in size depending on user preferences.
The first thing I’d figure out from your developers is whether the app you’re designing for will actually support Dynamic Type, or if the developers are asking for fixed font sizes for everything.
Hi @ntfromchicago thank you for coming back to me.
Yes, I am planning to support Dynamic Type.
But thought to design UI in Figma using just Large Default style.
And experiment with Dynamic Type in SwiftUI.
I think Figma doesn’t support dynamic type
Got it. So using Large Default is perfect in Figma.
You are correct. Figma does not support dynamic type.
The points they give in the chart are pixel independent. Meaning in iOS the body size is always 17 points tall.
In pixels, that is dependent on the device but optically, it will still measure on a ruler as 17 points tall. Just with a greater pixel density (so it’ll look super sharp). It’s confusing because of that gray note at the bottom that is more for folks who are designing in Photoshop or some other image editor that relies on image resolution (ppi) to size things properly.
For the purposes of handoff to developers, I would just name your text styles to match the iOS conventions: Headline, Body, Callout, etc. and then tell them to ignore the numbers you use if you are NOT designing at 1x. If you’re supporting Dynamic Type in your app, your devs won’t care what numbers* you use and will just want the correct style to implement.
*The exception is if you are making any text that stays the same fixed size regardless of Dynamic Type; then you would have to give them the correct size of the font @1x.
Hope this all helps. I am not sure I am helping with my responses as we might be talking about two different things in Figma.
Also just wanted to clarify this. If you’re importing a iPad screen shot into Figma (which is usually @2x for most iPads) the key is to shrink the screen shot by 50 percent in Figma to get the right font size to use @1x.
Thank you @ntfromchicago
This helps. Will keep all as x1 and will just name style as per Human Interface actual will be variable. But I can always test how it might look on a x2 draft frame
Thank you for explaining
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
