qgil wrote on 2014-05-10 21:19:31 (UTC)

More body text sizes:

• Gerrit: sans-serif 13px
• Trello: sans-serif 14px
• Mingle: sans-serif 14px
• Facebook: sans-serif 14px
• Twitter: sans-serif 14px
• Stack Overflow: sans-serif 14px
• MediaWiki: sans-serif 16px

aklapper wrote on 2014-05-16 23:07:09 (UTC)

I don't see an issue to fix here (Phab uses the same font size as Gerrit and Bugzilla) and I propose WONTFIX.

I don't know about other browsers, but Firefox remembers your prefered zoom level per website, and for quite some websites where I don't like the font size choice I just use a higher zoom level in my browser. Hence you only have to fiddle once with the zoom.

(Furthermore, zooming in Phabricator Maniphest does not create any UI issues and Phabricator uses responsive design ("responsive" in the meaning explained in http://liquidapsive.com/ ) which also works on small screens.)

aklapper wrote on 2014-05-16 23:08:44 (UTC)

Removed from "Phab day 1" project as this is only a blocker to using Phabricator if you don't know that you can zoom in your browser.

@Jaredzimmerman-WMF, you opinion is welcome.

I have good eyesight but I see no harm in increasing the font size here.

qgil wrote on 2014-05-10 21:19:31 (UTC)
[...]

• MediaWiki: sans-serif 16px

MediaWiki (et al) renders as 14px though, because of the 0.875em that's applied to the base of 16.

Bumping Phab's to 14px would be good.

MediaWiki's font-size depends on the configured default font size in your browser. Phabricator's doesn't. That's a bug.

In T81#783682, @adrianlang wrote:

MediaWiki's font-size depends on the configured default font size in your browser. Phabricator's doesn't. That's a bug.

I'm happy to report this problem upstream. Could someone point me to a doc or a piece of code where the good practice is explained? Of course, a patch would be even better.

Answer still welcome:

Could someone point me to a doc or a piece of code where the good practice is explained? Of course, a patch would be even better.

It's best to use em or %, instead of px, to define font-sizes. This allows users who have increased their "base font size" (default 16px in most browsers) to see larger text, without having to zoom-in manually (which increases the size of images and other page-layout elements, often with a very detrimental effect (such as requiring horizontal scrolling)).

http://www.w3.org/QA/Tips/font-size

As a base font size for a document, 1em (or 100%) is equivalent to setting the font size to the user's preference.
Do not specify the font-size in pt, or other absolute length units for screen stylesheets. They render inconsistently across platforms and can't be resized by the User Agent (e.g browser).

http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html

The author's responsibility is to create Web content that does not prevent the user agent from scaling the content effectively.

more at:
http://alistapart.com/article/howtosizetextincss
http://www.sitepoint.com/css-font-sizing-tutorial/#textpagezoom
http://snook.ca/archives/html_and_css/font-size-with-rem

Unitless line-heights are recommended at:
https://developer.mozilla.org/en-US/docs/Web/CSS/line-height#Prefer_unitless_numbers_for_line-height_values

Specifically, there are many options.

Long-term, it would be good to change

body { font:13px/1.231

to

body { font:100%

and then adapt everything else from there...

Short-term/bandage, adding something like this would help a lot.

.phabricator-remarkup (font-size: 110%}

(That will get the main comment text up to 14px).

Upstreamed at https://secure.phabricator.com/T8103 sorry for the delay.