[UI] Mono font and list alignment

[tr37ion]

Please, switch the main font for lists to Mono Fonts, as it makes it much easier to read the values. Additionally, right align all columns with values to the right or even better center it to the comma.

It is quite difficult to compare values column-wise if they aligned to the center with serif-font. A really nice Font is Fira Sans/Mono. It is Mozilla's font and it is perfectly readable even at very small sizes.

[ManfredKarrer]

Thanks for the suggestion! @ripcurlx will take it into consideration with other UI improvements.

[tr37ion]

@ripcurlx Do you have time to implement this? Aligning and using the suggested Mono font helps a lot with comparing values listed.

[ripcurlx]

Here's an example with the Fira Mono font used for numbers within the table. Of course it is not exactly in the same style as Verdana, which we use so far. Still, I don't have a big problem with it, as the benefit of the easier comparison is a big plus. (hopefully this will be more the default in the future 😉)

[ripcurlx]

Or we go all in and use Fire Sans and Fire Mono completely (we might have to use a bigger font size for this font - just a quick test). Having the number cells with Fire Mono and right aligned doesn't look very nice, so we would need to find a way to "point-align" the labels

[ripcurlx]

And having it centered and dot aligned looks like this:

[ManfredKarrer]

I don't like the font much. The zero looks kind of "old fashion". Maybe there are better mono types out? We can also purchase one if needed.

[ripcurlx]

This is how it would look like with:

• Verdana + Droid Sans Mono
  
• Verdana + Nimbus Mono
  
• Verdana + Lucida Console
  

To be honest I haven't found a monospace font that goes 100% nicely with Verdana so far. Maybe someone out there has a favorite monospace font that works with Verdana.

[tr37ion]

Please usw Fira's styles Medium, condensed, wide, bold, .. before using system font engine styles bold, italic, ....

Verdana and other older fonts were optimized for printing output. Verdana might work with higher DPI displays, while for lower resolutions Verdana is not a good choice. For me Verdana with display output has ...

• weak Kerning and Hinting
• uses a lot (unpredictable) horizontal space
• has no serifs which help the eye reading faster
• letters can be quite small or wide which makes it look inconsistent
• styles like bold and italic, don't render well and weakens hinting further
• bold letters don't scale nicely vertically. Top lines are thicker than bottom lines of a char
  

Not a good display font.

Instead, Fira was created with display and print rendering in mind. Its hinting is astonishing good. There are not as many fonts out there with high quality hinting as Fira has. Even with thin, bold or condensed styles Fira renders clean and crisp.

You may try Fira for the UI and Lucida Console for lists. Additionally, please use slightly bigger Fira font sizes 10.5 eg. or reduce the UI padding a bit. Fira doesn't blurr, therefore it looks a bit smaller/thinner and don't forget using its native styles if possible.

I'm a font enthusiast, I guess 😜

[ripcurlx]

I'm getting more and more comfortable using Fira Sans/Mono within the app. As I think you've to use this in production to evaluate the Fira, I've increased the relative font size and pushed a current master version to following branch for personal testing: https://github.com/ripcurlx/exchange/tree/add-monospace-font-support

Especially the small font sizes are more crisp then using Verdana.

[ripcurlx]

I've also increased the decimal places for the BTC amount so it will be nicely aligned in 99% of our cases.

[tr37ion]

I like it, you even got more space for new top menu icons, too. 👍

Can you try Fira Sans Medium for list column names and buttons instead of bold font style? I wonder if this might make them look a bit lighter in contrast to list content or headlines. Just something in between the column Headline style and list content. Maybe you already did, not sure.

[ripcurlx]

Good idea! Medium looks nice on as column titles. In the menu items the dao item was missing, but still I was able to increase the spacing a little bit.

[tr37ion]

I guess, you already saw the column shift.

You may use Fira Sans Condensed for chart numbers.

I noticed in general it is a good idea, using plain font styles first, before using bold or italic system styles. You may play around with those Fira fonts styles a bit later on.

[ripcurlx]

Yes, the column shift fixes itself as soon as you touch the scrollbar. Will have a look if there is a workaround for that. I'll have a look at the axis labels, how it would look like with the condensed one.

[ripcurlx]

Fira Sans Condensed Light was a nice choice.

[tr37ion]

Good choice. Maybe one step smaller if you think it is still readable.

I did use Fira as Blender UI font, too. Even with Blender's old font render engine Fira shows its power with small font sizes. Who ever created this font, he/she must be a font genius 🚀

[ripcurlx]

I'll try today using Fira Sans with Lucida Console and also give Google Roboto & Google Roboto Mono a chance. Might also be an option, especially if we want to go more into material design in the future.

[ripcurlx]

Google Roboto is also an option for me. @tr37ion @ManfredKarrer what do you think? Especially the mono space version is not so "old-school".

[ripcurlx]

And here's the version Fira Sans with Lucida Console.

[tr37ion]

I vote for Fira Sans with Lucida Console as Roboto has hinting problems and is too wide font.

[ManfredKarrer]

I am not convinced that we should introduce another font at all. It makes it feel unsound to mix fonts. The current fonts would align well if the number of decimal places is the same and they are right aligned. I would prefer to go that route rather to add a monotype font.

[tr37ion]

@ManfredKarrer Which fonts/styles are you exactly talking about?

As seen from the last mockup Lucida Console blends nicely into the UI. It harmonizes well with the proportional font used. I would even say it is not very obvious we are using a monospace font here. Compare it to the first mockup.

With crypto currencies figures can get very long and not using a monospace font will make vertical comparison difficult. Adding 'right-aligning' on top of proportional fonts, makes things even worse.

[ripcurlx]

After having a quick call with @ManfredKarrer, I'll try to test most of our screens and make some adjustments with the Fira Sans & Lucida Console pair and post the result over the next week. So we can have a look if we find a layout that everyone is pretty happy with. There is no need to rush such decision 😄

[ripcurlx]

I've exported a couple of screens with Verdana | Fira Sans + Lucida Console | Roboto next to each other. After doing this comparison I'm personal in favor of Roboto as it doesn't feel very dense, but still is the compactest one of the three compared. Also I like the mono space version of the Roboto.

[tr37ion]

Well, I'm still in favour for Fira as it uses semi-serifs which helps distinguishing difficult to read letters. Fira doesn't feel that sterile like the other fonts to me. You decide :)

[ripcurlx]

I did my first colorizing of decimal places with live data and it looks way better IMO now.

Before

After

[tr37ion]

I like it. One small issue with the chart font size. Maybe it looks a bit better (better hinting) if you make it a bit smaller. Besides that it looks great IMHO

[ripcurlx]

Here are a couple of before/after screens from my PR:
Before

After

Before

After

Before

After

Before

After

Before

After

Before

After

[cbeams]

Hey @ripcurlx, @tr37ion. I've run the changes in #1382 locally, and have tried to catch up on the conversation above as much as I can with limited time. I also really appreciate the extensive before and after shots in your last comment, @ripcurlx.

Unfortunately, my initial reaction to these changes is negative. The change away from Verdana to (I gather) Fira sans makes most text in the UI feel "weak" to me. I'm no font geek, but I like Verdana's characteristics in the Bisq UI. It has a certain "heft" to it that feels strong, solid. The taller-and-skinnier feeling Fira is not, for me, confidence inspiring at all.

I share Manfred's sentiments in #1028 (comment) about mixing fonts as well. In total, the presentation of information feels incoherent to me now.

Another issue is that there is just less vertical space available with these changes. For example, I am able to see fewer rows in Funds->Transactions than I was able to before. Same thing with Market->Spread and other views. You can see this reduction of vertical space in @ripcurlx's before and after screenshots in the comment directly above. Vertical space is at a premium in Bisq. I often have Bisq vertically maximized on my Apple thunderbolt display precisely because I want to take in as many rows of information (in any and all views) as I can. Anything that reduces that is therefore unwelcome.

I know there is a general tendency for longtime users of an application to react negatively to design changes to that application. Even if those changes really are for the better; experienced users often can't see their value right away; all they see is the change, and change is by default upsetting for people most of the time. So I acknowledge I may be subject to this effect right now, and am therefore open to having these changes defended. I'm not convinced at the moment, though, and so I'd like to request we either (a) scale this back to something more modest or (b) set up a time for @ripcurlx and anyone else involved to convince Manfred and myself why these changes are worth making and to help us see the light.

Here's what I like about the changes:

• Fixed width font in number values so decimals line up
• Right aligning number values so that decimals line up
• Graying out trailing zeros to make significant digits easier to read and compare

My main beef, I think, is moving away from Verdana for Fira in text throughout the rest of the application.

[ripcurlx]

@cbeams Thanks for the detailed feedback. I did expect some backlash on changing the font of an app, people got used to 😉. I understand that having the main font changed from Verdana to Roboto (I dismissed Fira Sans as it felt very dense to me) is a big cut, as I also had the feeling in the beginning that moving to different might be problematic. In the screenshots above only Roboto and Roboto Mono (monospaced version of Roboto) are used in different styles (Regular, Bold, Medium, Condensed Light). One big advantage of these screen optimized fonts is that they feel more crisp, especially with small sizes - also when you use them on non-retina displays.

The issues with vertical size shouldn't be too much of a deal, as I could change the height by setting the style differently like I did in the offer book.

In general everything is setup, that I can easily switch to a different font combination (e.g. Verdana + Lucida Console), so we still have a mono space font which is necessary for alignment issues.

To cut it short I think, besides the advantage of readability on non-retina displays, it is a matter of personal taste. One good idea would be to try out the app with the different font for some time to get used to it. So the its-different-feeling wears off a little bit and then discuss again this topic. What do you think @cbeams ?

[cbeams]

I haven't experienced crispness / readability issues on my non-retina displays, and I toggle between them constantly (between a MacBook pro and thunderbolt displays), so I'm not super convinced that there's a problem we're solving by switching this font out.

Assuming the vertical space problem can be solved as you mention, it doesn't solve the "weak" aspects of the narrower Roboto font for me. I would be willing to try it out for a while to see if my mind changes, but note that it's quite a hassle to do that. I'm trying to run from HEAD of master, to keep up with everything we merge; that conflicts with running for an extended period from whatever PR branch contains these changes. But in principle I'm willing to do it.

My suggestion would be to separate out the changes that we already have consensus (or something approaching consensus) around, like right aligning, graying out zeroes, and possibly going with a fixed width font for all number values. We could get that change fully merged and released, and then tackle swapping out the font in the rest of the app. Right now it just feels like too much, and too contentious to feel good about giving my ACK. But if you feel strongly about doing them all at once for some reason, then I'm open to trying it out for a more extended period.

[ripcurlx]

I just wanted to suggest the same to speed up the integration of the other changes. I'll update the PR with a Verdana & Lucida Console pair, which we could merge and keep the font discussion in another issue/pr.

[sqrrm]

To add a neutral opinion, I asked someone with some past UX experience and no preconceptions about the app. Verdana is apparently not as easy to read for dyslectic people and she preferred the Fira Sans option at a first glance.

Personally I prefer Verdana but I suspect that might well be bias from having used the app too much.

All the non font changes are good.

[ripcurlx]

Finally it took a little longer than expected (had to switch components because of JavaFX layout bug), but I've now everything ready to switch back and forth between different font pairs. If we want to keep Verdana for this PR there is the option to pair it with:
Roboto Mono

Lucida Console

Although I could tweak the row heights for Roboto Mono as well, Lucida Console renders smaller by default. I've pushed Lucida Console atm.

[ManfredKarrer]

I still have the feeling that a different font causes a subconscious felling of the design to not being consistent. The Lucida Console is also not centered well vertically in the rows. I personally would prefer to keep Verdana and only add the trailing zeros. But leave it to @ripcurlx to decide.

[ripcurlx]

Yeah - until we have a real mono space version of Verdana there won't be a perfect solution. That would be the advantage if we choose a font that has also a mono space version. Unfortunately the center/right aligning of numbers won't be possible with a non mono space font. Still, I wasn't happy with Lucida Console, so I tried a couple of other mono space fonts:
Source Code Variable

Courier New

PT Mono

Droid Sans Mono


If we want to have as little difference as possible to Verdana I think Droid Sans Mono could be a way to go. Or if someone has another font who might work better I'm happy to try it out as well.

What do you think @cbeams & @ManfredKarrer

[ripcurlx]

I've increased the size of Droid Sans a little bit. Now it would look like this:
Verdana only

With Droid Sans

[tr37ion]

@cbeams @ManfredKarrer The problem is not that Fira is too small it is more that Verdana, Droid, Helvetica and other suggested fonts are too wide. Now you "feel" that a display optimized font like Fira is too small. I strongly suggest just giving Fira a chance, as there are Users with other displays, OS or WM and DM's with limited font render capabilities out there.

Another cause might be that you are using a wide font with your OS UI, too. Then it might feel a bit different. With Linux is looks way better with Fira. If you can change your OS font to Fira, too, you will feel differently. Maybe try it for some days and get the impression as other users with other OS and UIs might feel it, too. To me Fira adopt well with web fonts, low and high resolutions, different WMs and DMs, too.

Verdana, Droid, Helvetica are non-display fonts. They were designed for print output. In the 90s they were used as display fonts, too, unfortunately. But they never were a good approach. That's why modern fonts were designed to overcome those weaknesses.

Fira is currently one of the advanced free font designs out there. Its hinting and kerning capabilities are awesome and it is still in maintained. Verdana, Droid, Helvetica only glance with advanced printing type setting engines like TeX eg.

Fira can even compensate the use of weak font render engines. It stays consistent even under harsh conditions. As an example the Blender UI with and without Fira:

Had I known that I cause such issues, just by suggesting a modern, well optimized display and print font with Fira, I probably hadn't post this issue, hehe 😄 Sure, I would prefer just switching all together in one PR and we can close this issue.

To sum it up: I don't think there is more to add here for me, as Fira is a real UI font. There won't be anything wrong just using it, except that some of us used to the 'old font' feel a bit uncomfortable the first days.

@ripcurlx Maybe you can one day let Bisq use the user's OS standard fonts.

[ManfredKarrer]

@tr37ion
Font preferences are for sure a lot of "taste" and not a hard science...

As said I would stick with Verdana. If you guys are super sure about the need to change to a monotype I find the last screenshot with Droid Sans the best.
Will not comment on that further as too much time was already burned on an issue which is probably not the most important one for the user...

[ripcurlx]

Ok - just pushed Droid Sans used as mono space font so we can merge the PR. If we find a better suited font for Verdana we'll update it and I guess the font discussion will be delayed to the bigger re-design of Bisq 😉