Ask / Submit
63

Ways to enhance text readability in Sailfish UI (incl. apps)

asked 2014-01-18 18:34:04 +0300

this post is marked as community wiki

This post is a wiki. Anyone with karma >75 is welcome to improve it.

updated 2016-01-15 17:10:07 +0300

This question describes an area of improvement in the Sailfish UI. Ideas on how to improve the situation can be given and voted upon as answers.

Edit. Updated the question to be relevant with the Sailfish 2.0 UI.

Text in the Sailfish UI is mostly displayed in white/light letters on dark background.The same appearance naturally extends to third party apps via Sailfish Silica (which is a good thing in that it makes the overall user experience consistent).

However, when reading any longer text, for many readers, dark text on white background is easier to read.

There should be an option to choose dark-on-light or a light-on-dark UI scheme, so that every user can have the UI that best suits them.

In what other ways could the UI be more readable/accessible to all users, including those with eyesight problems?

For visibility: Here's how to set the system wide font size:
https://together.jolla.com/question/16786/ways-to-enhance-text-readability-in-sailfish-ui-incl-apps/?answer=126441#post-id-126441

edit retag flag offensive close delete

Comments

1

It seems the answers are to be seen as alternative options to be voted: You should mention this in your question.

jgr ( 2014-03-09 23:17:17 +0300 )edit

@jgr, in this question I have followed the guideline given in https://together.jolla.com/question/4389/together-howto-question-answer-and-comment/ (top answer): Don't post your idea as a question, but come up with a question that your idea answers and then answer yourself with your idea.

I have since noticed that this has not become common practice, so it may be confusing. Maybe I'll edit the question to make it more clear. Still, this is not a vote to find the most popular alternative; the alternatives are separate ideas, they don't rule each other out, and you can vote both of them up or down if you wish.

Also, I'll make the answers wikis so it won't look like I'm just fishing for karma. :)

ssahla ( 2014-03-09 23:31:22 +0300 )edit
1

You write: "Text in the Sailfish UI is mostly displayed in white/light letters on dark background (with the ambience image showing through). App developers often adapt the same appearance for their apps". No, they don't. No app developers write in their apps "use white letters on a semitransparent dark background". They just use the Sailfish Silica components, which automatically uses the system theme (ambience). The app developer isn't trying to match the Sailfish look - on the contrary, it's actually very hard to avoid the Sailfish look.

ovekaaven ( 2014-03-10 02:17:22 +0300 )edit

@ovekaaven, you are right, thanks for the correction.

ssahla ( 2014-03-10 08:43:57 +0300 )edit

I suspect that the text is more readable on the higher resolution displays that Sailfish was clearly designed for ...

strongm ( 2014-03-10 11:11:03 +0300 )edit

12 Answers

Sort by » oldest newest most voted
40

answered 2014-01-18 18:34:16 +0300

this post is marked as community wiki

This post is a wiki. Anyone with karma >75 is welcome to improve it.

updated 2014-03-09 23:34:27 +0300

ssahla gravatar image

Add possibility of ambiences with light-colored background and dark text. This would make text easier on the eyes system-wide.

edit flag offensive delete publish link more

Comments

1

@Jaakko Roppola: After a long search I now re-found the scientific article supporting this quest: http://www.pnas.org/content/111/8/3170 – "Neuronal nonlinearity explains greater visual spatial resolution for darks than lights". So please, Jolla, reflect your design decisions in the light of visibility/legibility, not only of designer pleasure.

jgr ( 2014-03-25 01:49:40 +0300 )edit

This is possible, but only with ambiance RMP packages. See @Markkyboy's AllBlack for example.

jollailija ( 2015-10-03 18:12:36 +0300 )edit

@jollailija, no. @Markkyboy's AllBlack doesn't provide dark text with light background.

ssahla ( 2015-10-04 01:53:14 +0300 )edit

@ssahla The anwer was "add possibility of ambiances with light-colored background and dark text". That is allready possible, AllBlack is just an example of an ambiance with not-possible-with-UI-colors. It's possible to create an ambiance with any background and text colors.

jollailija ( 2015-10-04 12:15:37 +0300 )edit

@jollailija, ok, I misunderstood what you meant.

ssahla ( 2015-10-04 13:11:52 +0300 )edit
12

answered 2014-03-13 21:26:42 +0300

this post is marked as community wiki

This post is a wiki. Anyone with karma >75 is welcome to improve it.

updated 2014-03-13 21:26:42 +0300

tokaru gravatar image

What about letting the user switch between daylight and night mode?

In daylight mode the background would be bright (ambience image still showing through) instead of dark. Of course theme colors must change to a darker version of the original color for better readability.

So depending on the users' preference they could

  • permanently stick to the mode they like better
  • switch to daylight mode when they want to read longer texts
  • switch to daylight mode in the daylight
edit flag offensive delete publish link more

Comments

1

@tokaru FBReader does something similar and it kinda works. :)

MartinK ( 2014-03-13 23:23:09 +0300 )edit
1

@MartinK I know :) that's what inspired this suggestion. To be fair: FBReader only needs to do some black/white inversion, that's a little bit easier than doing the same for a complete theme ;-)

tokaru ( 2014-03-14 00:32:25 +0300 )edit
9

answered 2014-03-19 12:44:29 +0300

this post is marked as community wiki

This post is a wiki. Anyone with karma >75 is welcome to improve it.

updated 2014-03-19 12:44:29 +0300

jgr gravatar image

Give the user the choice to scale the system wide used font sizes or to set the font sizes.

(Yes, in some cases this may lead to texts shown incomplete. If possible, solve this problem by making text scrollable [pullable] within such UI elements [e.g. within a button of a given size]. However, in most such cases, only a little part of the text will be cut off and intelligible none-the-less. You could also introduce a gesture that temporarily resets the font size to default size for the whole screen.)

edit flag offensive delete publish link more

Comments

6

answered 2014-04-14 00:10:14 +0300

galacticginger gravatar image

Adding the option to change font size and boldness would greatly improve the readability for short sighted, elderly and visually impaired users. This is a standard in the IT industry. Thus I was a bit confused that it was not jet implemented.

edit flag offensive delete publish link more

Comments

6

answered 2015-10-03 04:06:28 +0300

Mika Hanhijärvi gravatar image

I do not aggree. Dark text on light background is not as good on eyes as light text on dark background. There is good reason why most of the devices whit display do have light text on dark background. Dark text on light background works well on paper because paper does not have any background light. But computer and mobile device displays are completely different issue because those do emit lots of light. That is not so big problem if you have good eye sight, but it is big problem if your eyes are not so good. Contrast between text and background is wery important. It is MUCH easier to read light text on dark background because pixels in text emit more light than pixels in the background. Just take any device which has display which supports high contrast mode, you will see that high contrast mode always has light text on dark background. I personally am blind now. When I did have eye sight left it was difficult or impossible to read dark text on light background because the background emitted too much light and dark letters where difficult to see. It was MUCH easier to read light text on dark background. Eyes also got much more tired when I tried to read dark text on light background. That is the reason why I started to use dark theme on my computer too. I have also used high contrast theme on desktop, it also has light text on dark background. I really can not aggree the claim that dark text on light background would be better or easier for the eye. Ofcourse it should be possivble to use ambiance light that if someone wants to do so.

edit flag offensive delete publish link more

Comments

That's why we have day/night mode, like the already mentioned FBReader.

Besides,

There is good reason why most of the devices whit display do have light text on dark background.

I would not go as far as claiming "most". And yes, there is a simple reason: because at some point in the past it was easier to implement. CRT screens are black by default. To make them display something, you need to modulate an electron beam. The CRT displays of early 1970s did not have a very good resolution. Trying to show a white screen would result in visible horizontal lines. Leaving the background black and showing the raster only in the displayed character was a lesser evil.

The early LCD displays, known from calculators, digital watches and personal organizers, had the opposite problem: they were white(ish) by default. Trying to display a solid black background was just as impossible as solid white on early CRTs. So they settled for a black text on a white background.

Nowadays we have a choice, and I can absolutely and unconditionally agree with the OP: in most situations, except for using the device in the dark, black-on-white is far more superior and desirable than the other way around.

pichlo ( 2015-10-03 21:51:06 +0300 )edit
1

@Mika Hanhijärvi, you have good points and you are speaking from personal experience. Can't argue with that; from your point of view, you are right.

I wrote my original post based on 1) what I have learned in working in graphic design (mostly in print) and 2) my personal experience. And I must admit there's no Truth here.

It's kind of "common knowledge" in graphic design that body text set with white on black doesn't work; if you do it in a magazine, you're sure to get feedback from (elder) readers: "Don't do this, it's impossible to read". But it's surprisingly difficult to find any backing to why it's so.

And it's certainly true that paper is very different from a screen.

I personally find it very difficult to concentrate on, say, a news article on my phone screen, with text laid out with white on black. I don't know exactly why.

One thing certainly is habit: books and magazines are set with black on white, and that's how I'm used to doing my reading.

But another important thing, regarding especially the Jolla phone, is reflections. The Jolla phone screen is not very good with contrast, and it's highly reflective. When I read white text on a black background, the background is like a mirror. It's white text on a mirror – very hard to see. On a white background, the reflections are far less visible and the black text stands out better from the background.

What all this amounts to, I think, is that the user should have a choice.

Based on your feedback, I'll edit the original question a bit to not be so black-and-white. :)

ssahla ( 2015-10-04 01:39:49 +0300 )edit
6

answered 2016-01-12 21:01:39 +0300

this post is marked as community wiki

This post is a wiki. Anyone with karma >75 is welcome to improve it.

updated 2016-03-15 20:10:34 +0300

Okay, the file controlling font size has been found!

In Sailfish OS size is controlled by the dconf key /desktop/jolla/theme/font/sizeMultiplier

All we need now is a GUI to change it. Anyone want to write a patch?

This is how you change it (write this into the Terminal):

dconf write /desktop/jolla/theme/font/sizeMultiplier value

value is a float. Default is unset or 1.0. (2.0 means two times bigger, 0.5 is two times smaller)

Also, you should modify another dconf value:

dconf write /desktop/jolla/theme/font/sizeThreshold 60

This will limit the maximum size of the characters. Default is 0 (unlimited).

For more info check out this article at Jolla Italia (here's a link to Google translate)

Thanksfor the hint, @fravaccaro!

Some screenshots with a factor of 1.4:

image description image description image description

edit flag offensive delete publish link more

Comments

:) I built this hack (along with Alien Dalvik font size changer and other tweaks) in my script, so far it's a cli UI, but a proper GUI is coming (there's already a 3rd party one on OR).

OpenRepos: https://openrepos.net/content/fravaccaro/theme-pack-support-sailfish-os Sources https://github.com/fravaccaro/themepacksupport-sailfishos/

fravaccaro ( 2016-01-12 21:50:36 +0300 )edit
3

I'm supriced that Jolla Italia wrote the instructions 1.5 years ago and, according to Google Search, were the only ones to ever post that dconf key in the world.

jollailija ( 2016-01-13 08:22:21 +0300 )edit

I added some screenshots to demonstrate the effect.

Sebix ( 2016-01-15 23:51:28 +0300 )edit

Thank you, @Sebix - very useful to know :)

Edz ( 2016-01-16 02:19:19 +0300 )edit

Thanks @Sebix!

jollailija ( 2016-01-16 13:08:50 +0300 )edit
5

answered 2016-01-01 19:40:55 +0300

Edz gravatar image

updated 2016-01-04 10:57:41 +0300

Edit: I have now made a package, so I've removed the 'guide' to prevent users from having any problems

https://openrepos.net/content/markkyboy/oo-bigger-fonts-sailfish

How the font folders look after and before. Rigorous testing has been carried out to make sure your system fonts are restored after removal of the application.

image description image description

Hopefully, this will be useful to others struggling to read parts or all of the UI on SailfishOS!

Regards,

ô¿ô

edit flag offensive delete publish link more

Comments

1

You could create a new Configuration value (import org.nemomobile.configurations or whatever it was called) that has a value of "1.0". Then, you multiply every font size in every QML file with that configuration value, for example: Theme.fontSizeSmall * fontSizeConfigValueWhatever
After that has been done, you can change the text size system-wide by just altering the configuration value

jollailija ( 2016-01-02 13:40:52 +0300 )edit

I tried this, but afterwards text looked like "kind of chinese" (unreadable). So I copied the original TTFs back. (Where did you get the Roboto- and Fira-TTFs from?)

UweLabs ( 2016-01-02 17:56:40 +0300 )edit

Hi @UweLabs - The fonts were found on font sites free for download. I've zipped up the 4 fonts I've used, you can get them here; https://www.dropbox.com/s/vktlijuweum30e2/fira-sans%20robot.rar?dl=0

To make it work, the sail-sans-pro folder must be removed (backed up somewhere) and replaced with fira-sans-pro folder and required fonts called FiraSans-Bold.ttf & FiraSans.Heavy.ttf

Then the roboto folder already contains Roboto-Light.ttf& Roboto-Thin.ttf but we don't want these either, so back them up, get them out of the roboto folder. Replace with Roboto-Medium.ttf & Roboto-Regular.ttf.

So, only 2 files in fira-sans-pro and only 2 files in roboto - nothing else. Restart homescreen or reboot phone. No reason now for the fonts to not be showing. I'm currently working on an installable version for others to use, I'm nearly there, just a few scripting problems.

Edz ( 2016-01-02 21:55:51 +0300 )edit

Cool, then I wait for you installable version. Nice work.

richdb ( 2016-01-03 12:08:20 +0300 )edit

Hi @Markkyboy, thank you very much for answering and for the link. I compared those font files with those I already found elsewhere. They are identical. I did exactly, what you described. I also did it a second time to be sure. But again the text (e.g. in SMS) is unreadable (funny characters...). Probably your script will help, so I wait. (By the way, I think it is not a good practise by Jolla, not to have build in font and font size changing, like most other phone have. Those things should be made possible by Jolla before other sophisticated procedures are programmed.) Again, thank you for answering. Best regards, Uwe.

UweLabs ( 2016-01-03 18:08:41 +0300 )edit
4

answered 2014-03-19 18:38:16 +0300

Gabir gravatar image

Since I have some eyesight problems I would like to suggest the following.

  1. in the latest update (1.0.4.20) there is a very better keyboard. The letters are extremely more readable than before for people like me with eyesight problems. White letters on a dark background are very good. The best would be an option to have a keyboard similar to the N9 one: completely black with white letters, but the latest Sailfish keyboard is fine too. Suggestion: if you choose to change the keyboard layout in future updates, please keep an option to set a keyboard layout like the 1.0.4.20 one!

  2. it would be useful in order to reduce eyesight problems to have some accessibility option like the ones we have in iOS 7.1, they are very good (I don't know how Android is about this subject). Specifically I mean options to set contrast, to decrease the white point, to darken system colours (as I stated before, keep an eye to iOS 7.1).

Please consider eyesight difficulties in your future updates, it's important for people like me. Maybe we aren't a very big number, but we exist and use smartphones!

edit flag offensive delete publish link more
3

answered 2014-01-18 18:34:39 +0300

this post is marked as community wiki

This post is a wiki. Anyone with karma >75 is welcome to improve it.

updated 2014-03-09 23:34:43 +0300

ssahla gravatar image

Add alternative, light-backgrounded themes for app developers to use, and make guidelines that suggest using dark-on-light themes in places where there is lots of text (notes, discussion boards, mail & messaging, long lists, app documentation, to name a few.)

edit flag offensive delete publish link more

Comments

1

Not an option. Apps (at least those that follow the Sailfish UX guidelines) don't have their own themes. They're not supposed to. If you want apps to look different, don't ask app developers to add theming. You're supposed to create a new ambience.

ovekaaven ( 2014-03-10 02:04:33 +0300 )edit

Actually, I'm asking for more themes (namely, an inverted or dark-on-light) to be included in Silica, so that developers can choose. Or, more possibility of variation within the default theme.

I'm not a developer, so I may make mistakes with the terms, sorry.

ssahla ( 2014-03-10 08:37:03 +0300 )edit

I think it is a great idea, that there are standards defined by an Ambience that do not only specify the parameters for the operating system UI but also for the apps UI. I would love it, being able to change for example contrast settings by defining an Ambience and see this change automatically being pushed forward to the very last app on my device.

jgr ( 2014-03-19 12:58:26 +0300 )edit
2

answered 2014-03-14 23:14:14 +0300

spacenewt gravatar image

Linking here my request of automatically inverted ambience color scheme here as a possible solution: https://together.jolla.com/question/32547/feature-requestambience-with-automatic-inverted-color-scheme-for-better-contrast/

edit flag offensive delete publish link more
Login/Signup to Answer

Question tools

Follow
10 followers

Stats

Asked: 2014-01-18 18:34:04 +0300

Seen: 4,207 times

Last updated: Mar 15 '16