Today Cards: correct fonts

deobald commented 2 years ago

The original wireframes did have some attractive fonts used in the card samples, but I wasn't sure if those fonts were readily available to mobile systems and if they were the fonts Nishant and @iamsankalp intended to use in the actual application.

I'm creating this card so Nishant and Sankalp can weigh in on which fonts to use. This card is an extension of an issue @brihas raised: #96

These are these font I chose initially — not because they look nice, obviously. :) Just because it was installed by default on both Android and iOS and they looked approximately like the fonts in the original wireframe ... which is to say, they have serifs.

I will say that the smaller font size on translations probably has to stay, regardless of which font we choose. Any larger, and the translations wrap on almost every single line, which not only looks terrible, it causes some cards to take up the entire screen, hampering usability.

The current font sizes are 20 "logical pixels" for Pāli and 16 "logical pixels" for the translation. If we want the Pāli and its translation to be in identical fonts (and sizes), we could reduce the font size of the Pāli?

deobald commented 2 years ago

I've removed the bold as per #96 ... the font sizes still differ. For example:

deobald commented 2 years ago

Feedback from Sankalp:

From what I could check, the fonts used are:

Sans Serif: Apple system font i.e. SF Pro
Serif: Georgia

So, this would need to be tweaked for Android anyway since SF Pro won't be available.

deobald commented 2 years ago

Here are tentative choices:

San Serif: Inter / Inter on Google Fonts
Serif: If Georgia is available by default on iOS and Android, then use Georgia. In lieu of Georgia (which is non-free) either Merriweather or Gentium

I'll create screenshots with each and show them to Sankalp for review.

deobald commented 2 years ago

Here are the Serif font samples.

Notes:

Note that the "px" in each is Flutter's "logical pixels".
Note that Gentium Plus (the author's preferred variation) is not yet available through the google_fonts Flutter package. Google has updated the package but it hasn't been officially released. Gentium itself is under active development, and the author notes that "Version 7 (in 2023) will be axis-based". This actually seems very cool (https://software.sil.org/fonts/axis-based-fonts/) and would give us more control over the font weight in very small increments. Note that Gentium Plus (once it's released for Flutter) is slightly thinner than Gentium Book Basic.

Caveats:

Georgia is not necessarily going to provide the real Microsoft Georgia font. Since Georgia is non-free, it isn't available from the google_fonts Flutter package. fontFamily: "Georgia" is permitted, but specifying fonts by family isn't very precise. Flutter will rely on the fallback chain of fonts in that family (all the way back to the system's most generic Serif font). Although most Android and iOS versions probably do have Microsoft's Georgia font installed, the results are technically non-deterministic. For that reason, I'd suggest we look at the other two fonts.
Gentium rendered quite small, so I also took a screenshot at 18px.

Georgia (Font Family only) 16px:

Gentium Book Basic 16px:

Gentium Book Basic 18px:

Merriweather 16px:

I've reduced these to 340px wide to help provide some sense of font scaling at lower resolutions. However, that's quite artificial — the above images are what fonts look like scaled by the browser, not a mobile operating system. The reduced resolution is only representative of font weight over pixel territory. For example, Merriweather is "fatter" and will use more pixels regardless of whether iOS or Firefox is scaling it.

To see the full-sized screenshots taken on an iPhone SE (2020), use the following links. I found it's easiest to download these and compare side-by-side.

georgia-family-16px gentium-book-basic-16px gentium-book-basic-18px merriweather-16px

deobald commented 2 years ago

Here are the Sans Serif font samples.

These aren't strictly necessary, since @iamsankalp already decided on Inter ... however, I'm including them for posterity and for the interest of anyone reading this issue. I was quite surprised to find out how much nicer Inter looks than Noto Sans.

Noto Sans:

Note that the headers (the date and "PALI WORD OF THE DAY") are still in the default system font. It's definitely much easier to see why Inter is superior when looking at the full-res versions side-by-side:

pali-noto-sans-18px pali-inter-18px

deobald commented 2 years ago

The Settings tabs remain a slightly weird font because there doesn't seem to be a way to set the font on the Tab class. @iamsankalp is designing a new Account screen anyway, which will likely do away with the tabs.

deobald commented 2 years ago

All fonts now default to Inter across the app. Gentium Book Basic 18 lpx is the font I'll leave in place for serif fonts until @iamsankalp evaluates them.

deobald commented 2 years ago

Closing this issue as the current fonts are working quite well. If @iamsankalp wants, we can open another issue to tweak the font choices.

brihas commented 1 year ago

Merriweather is not an option as it does not contain all the characters needed to display Pāli words, so I suspect it is not fully Unicode compliant. For example, please refer to the ṃ (m underdot) in your screenshot and you will see that it is being replaced by a sans-serif font since ṃ cannot be displayed with Merriweather.

For testing purposes, it would be good to verify that any font under consideration can in fact display all the characters we require for displaying Pāli. Only once it passes this check should it be considered.

On Wed, Aug 3, 2022 at 9:19 PM Steven Deobald @.***> wrote:

Note that Gentium Plus is not currently available through the google_fonts Flutter package. (Though it should be soon.)

Here are the Serif font samples. Caveats:

Note that the "px" in each is Flutter's "logical pixels".

Georgia is not necessarily going to provide the real Microsoft Georgia font. Since Georgia is non-free, it isn't available from the google_fonts Flutter package. fontFamily: "Georgia" is permitted, but I think it's safe to say the results are non-deterministic. For that reason, I'd suggest we look at the other two fonts.

Gentium rendered quite small, so I also took a screenshot at 18px.

Georgia Font Family 16px:

https://user-images.githubusercontent.com/20282/182741043-6a98d633-b613-40ee-a87f-897f4dfdb3ff.jpeg Gentium Book Basic 16px:

https://user-images.githubusercontent.com/20282/182741037-61e573e8-cb6f-45cc-9605-6e2f9d859bd8.jpeg Gentium Book Basic 18px:

https://user-images.githubusercontent.com/20282/182741041-64e50ea3-eeee-4abb-b481-6cdf428ca952.jpeg Merriweather 16px:

https://user-images.githubusercontent.com/20282/182741045-a97e1a0f-5edc-4dbc-abda-0c2b233ac44b.jpeg

I've reduced these to 340px wide to help provide some sense of font scaling at lower resolutions. However, that's quite artificial — the above images are what fonts look like scaled by the browser, not a mobile operating system. The reduced resolution is only representative of font weight over pixel territory. For example, Merriweather is "fatter" and will use more pixels regardless of whether iOS or Firefox is scaling it.

To see the full-sized screenshots taken on an iPhone SE (2020), use the following links. I found it's easiest to download these and compare side-by-side.

georgia-family-16px https://user-images.githubusercontent.com/20282/182741043-6a98d633-b613-40ee-a87f-897f4dfdb3ff.jpeg gentium-book-basic-16px https://user-images.githubusercontent.com/20282/182741037-61e573e8-cb6f-45cc-9605-6e2f9d859bd8.jpeg gentium-book-basic-18px https://user-images.githubusercontent.com/20282/182741041-64e50ea3-eeee-4abb-b481-6cdf428ca952.jpeg merriweather-16px https://user-images.githubusercontent.com/20282/182741045-a97e1a0f-5edc-4dbc-abda-0c2b233ac44b.jpeg

— Reply to this email directly, view it on GitHub https://github.com/pariyatti/mobile-app/issues/102#issuecomment-1204651636, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAHIXKAKO6F5OWK4RH2OESDVXMLAPANCNFSM53YVFWGA . You are receiving this because you are subscribed to this thread.Message ID: @.***>

pariyatti / mobile-app