How to follow designs - mainly font sizes


#1

Hi Guys !

I’m starting with {N} which is very cool !

Right now, i have some app designed as PSD file. This file has some fonts, images and UI elements.

I’m a webdesigner, so for me it was clear that i can just check font size and code this with pixel perfection. But - this app design has for example a text that has 40pt and whole design is at 72dpi.

If i’ll attept to cpde this 40pt in {N} it will be huge, so right now im wondering how can i get more precise font sizes in my code ?

I’ve done some trick, i’ve converted this PSD into 300dpi and i see that font size is chamged into 10pt which looks similar on coded view compared to design.

So, was this a mistake to design at 72 dpi ? Or any other tips for me ?

Thanks a lot !


#2

Just a word of caution - different devices have different pixel densities, so using 300dpi as the cornerstone of all your ‘pt’ conversions could prove to be very wrong.


#3

Hi, i think i’m aware of this - so what are best practices to do it right ?


#4

Use the dp unit when dealing with sizes - that scales accordingly with the device the application is executed on.


#5

Thank you @Pete.K.

Can you tell me how its best to convert 30pt from design into correct unit in the code then ?
30pt = ?dp ?

Thanks.


#6

Font size is always measured in pt with iOS.

In Android it’s always SP, so it picks up user’s preferred font scale (from accessibility settings). If you set the font size to a different unit like dp or others, your app may not respond to the user preferences.

Still If you want to update the unit, I think you might have to override the TextBase class in NativeScript.