Font choices for iOS vs. Android about jasonette-android HOT 3 OPEN

The big difference between iOS and Android is that:

1. iOS supports wide range of typography out of the box (You can see the list of fonts available here: http://iosfonts.com/)
2. Whereas, Android.....just check out this stackoverflow post http://stackoverflow.com/questions/29384114/what-fonts-are-installed-by-default-on-android - There are 3 fonts. Yes 3.

Of course you can include additional fonts to the project bundle, but this has limitations. I initially attempted to add as many fonts as I could on Jasonette-Android, and ended up with a huge file size. We've been trying to slim down the apk size so this was far from desirable, so I got rid of most of the font files (except for a couple which you can find under app/assets/fonts.

You can actually use the font names directly in JSON and it should work, but the problem is these font names are not cross-platform. So it's hard to make it work both on iOS and Android.

One way to get around this would be to create two separate JSON files for iOS and Android.

Another (better) way would be to use the newly introduced mixins and environment variables to detect the operating system and selectively mix in fonts.

However these are all so complicated and not ideal. That's why I didn't bother to dig deep into this yet. If anyone has a good idea on how to tackle this issue, please feel free to share.

p.s.
The current algorithm for font detection on Android is super primitive--it looks at the font name (for example HelveticaNeue-Bold) and if it contains the keyword bold, it just makes the font bold (with the Android default font). See here for the implementation.

from jasonette-android.

Generally speaking, what I'd like in this area is ability to write my JSON stylings in a head.styles setup and then be able to reliably call on that font in any style block without having to wonder if I got the right font for the right OS.

While it's disappointing Android only ships with three, it looks like they can be thought of as three major font families, serif, sans, and monospace. So a good Jasonette supported solution could be to assume 80% of apps built with it will use one of three variants with variants applied by setting bold, italics, etc. and provide OS specific font choices to match. So, for example, today, we're doing this:

"styles": {
  "menu_item": {
    "font": "HelveticaNeue-Bold",
    "size": "16",
    "background": "#698269",
    "color": "c8c8c8",
    "align": "right",
    "padding": "8"
  },

Which is necessarily iOS specific. At this point I am feeling somewhat trapped into tying the JSON too closely to the target device and really don't want to get into mixing in and responding based on device/env variables. To avoid this device dependency trap, we could utilize the adapter pattern and supply the three main families Android supports, namely, sans, serif, and mono across both iOS and Android by introducing a new "font_family." The goal is that we could do this:

"styles": {
  "menu_item": {
    "font_family": "sans-serif",
    "font_style": "normal",
    "font_weight": "bold",
    "size": "16",
    "background": "#698269",
    "color": "c8c8c8",
    "align": "right",
    "padding": "8"
  },

Then make it so "sans-serif" would, by convention, translate to HelveticaNeue-Bold on iOS and, I'm guessing, Ruboto-Bold on Android.

To add support for any font, I recommend taking a chapter out of CSS's own solution to the problem. That is, we're able to do something like this to either override convention or name a new font family:

"styles": {
    "@font_face": [{
        "font_family": "sans-serif",
        "font_weight": "normal",
        "font_style": "normal",
        "src": "app/assets/my_favorite_sans.ttf"
        },
        {
        "font_family": "sans-serif",
        "font_weight": "bold",
        "font_style": "normal",
        "src": "app/assets/my_favorite_sans_bold.ttf"
        },
        {
        "font_family": "fancy-pants",
        "font_weight": "bold",
        "font_style": "normal",
        "src": "app/assets/a_fancy_pants_bold.ttf"
        }
    ]},

Now, given the above, the conventional sans-serif font is replaced with my own font choices and I now have a new font family, "fancy-pants" I can use throughout my styling.

I suggested "@font_face" instead of "font_face" to call out that we're going to override what the framework does by convention and that these fonts will be used wherever we're utilizing said font_family names in our styles.

The unresolved thing in the above is what to do if I declare "fancy-pants" bold, but then use "font_weight": "normal" in my stylings. My suggestion, if the OS doesn't support approximations, then fallback to the conventional sans font. If this is the case with the OS, then falling back allows the developer to spot the problem and supply additional font face file to handle normal weights. Otherwise if approximations are supported, feed the necessary info to the OS.

These are just some initial thoughts, so feel free to critique or improve.

from jasonette-android.

Another idea, we could add a font object under head linked to ios and android font name:

{
  "$jason": {
    "head": {
      "fonts": [
        {
          "name": "mycustom_name",
           "android": "Droid Sans",
           "ios": "HelveticaNeue",
           "src": "myfont.ttf"
        }
      ]
    }
  }
}

Then, anywhere I need to pass a font, I provide mycustom_name.

What do you think about that ?

EDIT: After reading the @mwlang, CSS inspiration is a good idea. But I would no put it under styles since it's not a style.

from jasonette-android.