How to change font size unit? Or make fonts appear the same size on different devices?

I think I already know the answer, but I have to ask. So we developed an update which includes an option for users to have larger text size. Apparently, they didn't notice this until now because they want the font size to be the same on smaller phones and big phones. (even though the app had different font sizes before we did this, but i digress). So we see that the same number of words is consistent whether it's an iPhone 5 or iPhone 6S+. And I understand we just give the FontSize attribute a value and the phone determines how big it should be.

Is there any way to force it to be the same font size no matter what kind of phone it is? Before I get backlash, I am not setting a different FontSize value. It's the same, but depending on how big or small your actual phone is, it might APPEAR to be bigger or smaller. Which we would like to do away with.

I also understand that FontSize uses points for iOS, and DP for Android. So I guess the only way to achieve what management wants is to (if we can) change the unit to pixels or something? Obviously, I'm pretty confused because this seems to be working as expected, just a really odd request from management which I hope someone has some insight on?

Tagged:

Answers

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    You can define a Style that includes the font sizes you want for each platform.
    https://redpillxamarin.com/2016/12/23/203-now-for-the-left-foot/

    Keep in mind, that you're not going to be aware of the device user settings being changed. Both iOS and Android let the user change the font scaling as part of the accessibility features for the user. So you can say a size of 14... But the user might have poor eyesight and have font scaling turned up to about 125-200%. That will be done on top of your values.

  • PatrickSpainPatrickSpain USMember ✭✭

    @ClintStLaurent said:
    You can define a Style that includes the font sizes you want for each platform.
    https://redpillxamarin.com/2016/12/23/203-now-for-the-left-foot/

    Keep in mind, that you're not going to be aware of the device user settings being changed. Both iOS and Android let the user change the font scaling as part of the accessibility features for the user. So you can say a size of 14... But the user might have poor eyesight and have font scaling turned up to about 125-200%. That will be done on top of your values.

    We have our own mechanism of having large text, but I guess I'll look into the style. Thanks.

  • PatrickSpainPatrickSpain USMember ✭✭

    @ClintStLaurent said:
    You can define a Style that includes the font sizes you want for each platform.
    https://redpillxamarin.com/2016/12/23/203-now-for-the-left-foot/

    Keep in mind, that you're not going to be aware of the device user settings being changed. Both iOS and Android let the user change the font scaling as part of the accessibility features for the user. So you can say a size of 14... But the user might have poor eyesight and have font scaling turned up to about 125-200%. That will be done on top of your values.

    Actually looking at this, not sure how it helps (although I do appreciate you taking the time to try). We just want the font sizes to appear the same across different resolutions for the iPhone (haven't even touched Android yet).

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭
    edited January 2017

    Well... Font size like all other measures in Xamarin.Forms is in Device Independent Pixels. It should already give the same perceived size across different iOS devices, from iPhone to iPad.

    But like I said, if the iPhone is set to scale fonts by 125% and the iPad isn't, then you'll perceive a difference.

    We have our own mechanism of having large text,

    Hmmm... Maybe that's the source of the issue - since the underlying ecosystem already handles perceived size adjustment. Try turning off your in-house mechanism and start there.

    I can tell ya right now that my apps appear to have the same font size across various iOS and Android devices by doing nothing more than setting sizes in styles. There tends to be a little adjustment between Android and iOS. For example 20 on android looks about the same as 22 on iOS - at least that's what makes my bosses happy.

  • PatrickSpainPatrickSpain USMember ✭✭

    @ClintStLaurent said:
    Well... Font size like all other measures in Xamarin.Forms is in Device Independent Pixels. It should already give the same perceived size across different iOS devices, from iPhone to iPad.

    But like I said, if the iPhone is set to scale fonts by 125% and the iPad isn't, then you'll perceive a difference.

    We have our own mechanism of having large text,

    Hmmm... Maybe that's the source of the issue - since the underlying ecosystem already handles perceived size adjustment. Try turning off your in-house mechanism and start there.

    I can tell ya right now that my apps appear to have the same font size across various iOS and Android devices by doing nothing more than setting sizes in styles. There tends to be a little adjustment between Android and iOS. For example 20 on android looks about the same as 22 on iOS - at least that's what makes my bosses happy.

    You're not understanding. Let me clarify.

    We have labels.

    I set the label.FontSize to 16 lets say. On a iPhone 5 this looks smaller (although, I agree it's not ACTUALLY smaller) than on the iPhone 6S. I'm not following your point about "that might be the problem". If the user selected larger text using our option, then we simply just set the label.FontSize to 20. So I'm just not following your point that the large text is the issue, especially seeing as the issue still occurs when the user did not set their large text settings (so default).

    I understand this is hard to understand, it's even harder for me to try to come up with a solution.

    What's the difference between settings Label.FontSize than setting a style, which appears to just use an enum given by a labelsize? And we don't want everything being the same size on the page, how would we be able to set different sizes using your method (I can try to see if it works).

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    I set the label.FontSize to 16 lets say. On a iPhone 5 this looks smaller (although, I agree it's not ACTUALLY smaller) than on the iPhone 6S.

    So you're trying to fix an optical illusion? That's what it sounds like you're saying when you say you agree it really isn't smaller.

    Screen shots might help a ton.

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    Or... If you are already figuring out how to fetch the device...
    You could make a Converter for the font size based on the device.

    Seudo code for the logic of what you'd do:

    if (device is iPhone5) return fontSize * 1.25;
    if (device is iPhone6) return fontSize);
    if (device is AplusModel) return fontSize * .85);
    

    Then send the current fontSize as the ConverterParameter to the Converter.

  • PatrickSpainPatrickSpain USMember ✭✭
    edited January 2017

    @ClintStLaurent said:

    I set the label.FontSize to 16 lets say. On a iPhone 5 this looks smaller (although, I agree it's not ACTUALLY smaller) than on the iPhone 6S.

    So you're trying to fix an optical illusion? That's what it sounds like you're saying when you say you agree it really isn't smaller.

    Screen shots might help a ton.

    It's smaller because the phone is smaller. But they're set to the same font size. EDIT they look the same when I take screenshots, go figure! maybe that's because it's supposed to be like that UGH!

    Here's a new screenshot that shows what I'm talking about.

    While it appears, this is actually good, right? Same experience on different phones. UGH! Anyways, so there's "more room" on the 6+ so management says we can fit more words there. If you're confused at this point, so am I. But your solution might work with the font size in the value converter, I'll give it a try.

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    It's smaller because the phone is smaller. But they're set to the same font size.

    Well yeah... So is everything else. The button is smaller too.
    Everything is scaled and both phones are showing the exact same content. That's what you want. That's the right display.

    While it appears, this is actually good, right? Same experience on different phones.

    Yes. Exactly. That is what the user expects: The same experience on different phones. That's the whole point.

    Anyways, so there's "more room" on the 6+ so management says we can fit more words there.

    No. They are stuck in the 1990's trying to micromanage the resolution like they are still developing on WindowsXP.
    There is no more room. Its the same amount of white space on both phones: RELATIVE TO THE SIZE OF THE SCREEN.
    They need to stop measuring in inches and start looking is percentage of available real estate. Both phones are showing the same 15% of total width as 'unused'.

    If you're confused at this point, so am I. But your solution might work with the font size in the value converter, I'll give it a try.

    I would urge you not to. If you give in to the bosses wanting to do this sort of crap now, you're going to be doing it for the life of the project - driving you crazy and making you quit in a year. Not to mention making all your users hate the product. As you said, people expect the same experience on every phone: iPhone4 or Android S8. When you start screwing with stuff because your bosses need to be educated.... If you shrink the size of the type on the iPhone6plus to "put in more words" you bypass the whole reason people buy a bigger screen: To get bigger displays - and that will piss them off.

  • SteveShaw.5557SteveShaw.5557 USMember ✭✭✭
    edited June 2018

    @PatrickSpain

    I also understand that FontSize uses points for iOS, and DP for Android

    No, Xamarin Forms is always in "dp", which is 160/inch. Otherwise, it would be useless as a cross-platform description.

    @ClintStLaurent

    Everything is scaled and both phones are showing the exact same content.

    I don't know how he made that image with everything scaled, but that is not how FontSize works in X Forms. If a device is physically larger, it has more "dp", and more letters will fit in a line. If he's getting a different behavior, then that is due to different settings on the different devices, or due to his special scaling mechanism, not due to X Forms.

    So ironically, the way X Forms works - for font size - is the way Patrick says his management wants it to work.
    Most posts on this topic are people trying to do the opposite: to automatically get their fonts to scale larger on physically larger devices. Which requires a fair amount of effort. For that, I recommend making named resource dictionary entries per font and size needed. Then setting those up in code-behind of your resource dictionary class. Or in app startup.

    @ClintStLaurent

    If you shrink the size of the type on the iPhone6plus to "put in more words" you bypass the whole reason people buy a bigger screen: To get bigger displays.

    Not necessarily. Larger devices can be bought for "blow it up bigger" [what you said] or "show more content" [what Patrick's management wants] or a combination of the two. This can be seen in a more dramatic size change by considering why people buy bigger monitors for pcs, or buy an iPad instead of doing everything on an iPhone. But it still applies even for relatively smaller changes of 4" vs 5" vs 6".


    OTOH, your suggestion of using Converter, to adjust font size on different size devices, is right on. Just need to change the multipliers: Use a smaller multiplier on a small device, and a larger multiplier on a large device. The way to do this is to have platform-specific code in app startup store device metrics in static variables, so device width and height in dp are available to all converters. Then can do something like return fontSize * ActualDeviceWidthInDPs / TheDeviceWidthYouDesignedYourScreensOnInDPs;

    Now personally I prefer to not scale text as quickly as the device size grows. It is nice to allow some more text (and more rows of items in a ListView) on a larger phone. I use Sqrt: return fontSize * Math.Sqrt(ActualDeviceWidthInDPs / (double)TheDeviceWidthYouDesignedYourScreensOnInDPs); NOTE: (double) is in case you used int variables instead of double variables; we don't want to truncate the division to nearest integer. Note that the Sqrt is a single value on a given phone, so can be pre-calculated and stored in a platform-independent static. To avoid doing lots of Sqrts: public static double FontSizeMultiplier;, which I calculate once in per platform code: FontSizeMultiplier = Math.Sqrt(ActualDeviceWidthInDPs / (double)TheDeviceWidthYouDesignedYourScreensOnInDPs);. Or if need to change as phone rotates, then update that value in platform-specific rotation code. Either way, usage in converter - or in prepping the font resources I mention above - is return fontSize * FontSizeMultiplier;

Sign In or Register to comment.