?
avatar PhilETaylor
PhilETaylor
27 Jan 2015

On my top-of-the-range iMac it feels that the new Joomla 3.4 font size/weight is a little off - blurs - too thin?

Thoughts? (old fart comments acceptable...)

Joomla 3.3 on left - Joomla 3.4 on right

screenshot 2015-01-27 22 37 12

avatar PhilETaylor PhilETaylor - open - 27 Jan 2015
avatar jissues-bot jissues-bot - change - 27 Jan 2015
Labels Added: ?
avatar brianteeman
brianteeman - comment - 27 Jan 2015

#5755 can you revert that locally and retest

avatar PhilETaylor
PhilETaylor - comment - 27 Jan 2015

yup thats related

If I remove

-webkit-font-smoothing: antialiased;

It looks a LOT better :)

The other one:

-moz-osx-font-smoothing: grayscale;

Doesn't seem to have any change in effect for me.

screenshot 2015-01-27 23 06 25
screenshot 2015-01-27 23 07 09
screenshot 2015-01-27 23 07 32

avatar PhilETaylor
PhilETaylor - comment - 27 Jan 2015

Not sure how clear this will be but there is a serious degradation in visual ease when toggling this new css

Gif/Video: http://cl.ly/1g0T123z3Z0u

avatar brianteeman
brianteeman - comment - 27 Jan 2015

@nternetinspired any thoughts on this?

avatar nternetinspired
nternetinspired - comment - 27 Jan 2015

I see it as a huge improvement, the first time in forever that I look at Joomla default, front or back, and don't feel like I need to clean the blur from my glasses. I agree the difference is considerable.

FWIW, I'm 40, myopic and am sitting behind the same iMac as @PhilETaylor I believe (2012, 27"), so it mostly boils down to preference and familiarity I think.

The recent changes only affect OSX rendering in Chrome, Safari and Firefox.

avatar mbabker
mbabker - comment - 28 Jan 2015

You can definitely see a difference looking at it side by side. And it does seem worse when you start toggling the effect on/off after the page is rendered. The thing that jumps out at me is the fact that the 3.4 text doesn't seem as strong as 3.3, but I don't think there's a strong regression here.

FWIW, this screenshot comes off a late 2013 13-inch MacBook Pro Retina with a 1440x900 resolution.

screen shot 2015-01-27 at 7 07 57 pm

avatar PhilETaylor
PhilETaylor - comment - 28 Jan 2015

Im not goin to make a sing and dance about it. I have perfect eyesight and use my 2x27" (not retina) iMac's each and every day - I have never seen a web app as badly rendered as Joomla 3.4 admin console - it was my "first impression" spoilt after logging in...

"Antialiased text looks more slender and because it has less pixels to play with, so instead of spilling out to more pixels it tries to fit in less. Unfortunately, unless the font is very well optimized to fit into each pixel, it will still spill out into adjacent pixels, causing it to have blurry edges, as well as giving it a weak, washed-out look" - Quote from http://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/

Examples:
http://files.christophzillgens.com/webkit-font-smoothing.html

avatar PhilETaylor
PhilETaylor - comment - 28 Jan 2015

Also I notice that screenshots make it look "better" than it actually is when "viewed" on a screen :)

avatar JoomliC
JoomliC - comment - 28 Jan 2015
Also I notice that screenshots make it look "better" than it actually is when "viewed" on a screen :)

I have already posted about it, and as myself a colorblind, the light returned by a screen, could altered perception depending on retinal sensibility.
#5755 (comment)

I agree for this improvement applied for icons (eg. Joomla icon). Not for text. ;-)

avatar nternetinspired
nternetinspired - comment - 28 Jan 2015

Of course something which does have a huge effect on legibility is font-size.

At best font-sizes in admin interface are set to only 80% of their intended size, the default font-size, and they are often set smaller than that. On its own this is a big accessibility issue.

All glyphs are designed to at specific sizes and we're using fonts designed to be used at 16px at 13px maxiumum. It's little surprise they look a bit skinny. The fact that poor antialising was partially alleviating that issue beforehand does not mean it is the correct 'fix'.

avatar zero-24 zero-24 - change - 28 Jan 2015
Category UI/UX
avatar zero-24 zero-24 - change - 28 Jan 2015
The description was changed
avatar PhilETaylor
PhilETaylor - comment - 29 Jan 2015

Another example of bad looking text - see the configure buttons (Akeeba Backup).

It seems any button with btn-mini css class gets to look bad

screenshot 2015-01-29 09 04 38

avatar PhilETaylor
PhilETaylor - comment - 29 Jan 2015

So in answer to myself then - Is it me? - Yes, seems like this is "progress" :-)

avatar PhilETaylor PhilETaylor - close - 29 Jan 2015
avatar PhilETaylor PhilETaylor - close - 29 Jan 2015
avatar PhilETaylor PhilETaylor - change - 29 Jan 2015
Status New Closed
Closed_Date 0000-00-00 00:00:00 2015-01-29 09:18:46
avatar brianteeman brianteeman - reopen - 29 Jan 2015
avatar brianteeman brianteeman - reopen - 29 Jan 2015
avatar brianteeman brianteeman - change - 29 Jan 2015
Status Closed New
avatar brianteeman
brianteeman - comment - 29 Jan 2015

Re opened. It is not just you phil. Others have commented and when it comes to the buttons I certainly agree they are not as easy to read.

avatar JoomliC
JoomliC - comment - 29 Jan 2015
So in answer to myself then - Is it me? - Yes, seems like this is "progress" :-)

@PhilETaylor read my comment above, you're not alone ;-)
The @nternetinspired intention was good, but for text, it gives reading issue due to the font-family used. In some place, issue due to the text shadow. And a main issue depending of user eyes!
I think we could add this css addition for Joomla icon, that's sure!
For other places, it should be done with care.
Or should we use a new default font-familiy with a better rendering for the body ?

Note @PhilETaylor :
-webkit-font-smoothing: antialiased; -> Safari and Chrome
-moz-osx-font-smoothing: grayscale; -> Firefox OSX only

;-)

avatar brianteeman
brianteeman - comment - 29 Jan 2015

Speaking personally from the dirtiest laptop screen in existence when I
compare screens side by side it is clearer in some places and less clear in
others.

It seems to my eyes to be clearer when the text is on a white background
and less clear when the text is on any coloured background. BUT it may be
that the css is slightly different then as well (perhaps shadows as Cyril
suggested)

On 29 January 2015 at 11:51, Cyril Rezé notifications@github.com wrote:

So in answer to myself then - Is it me? - Yes, seems like this is
"progress" :-)

@PhilETaylor https://github.com/PhilETaylor read my comment above,
you're not alone ;-)
The @nternetinspired https://github.com/nternetinspired intention was
good, but for text, it gives reading issue due to the font-family used. In
some place, issue due to the text shadow. And a main issue depending of
user eyes!
I think we could add this css addition for Joomla icon, that's sure!
For other places, it should be done with care.
Or should we use a new default font-familiy with a better rendering for
the body ?

Note @PhilETaylor https://github.com/PhilETaylor :
-webkit-font-smoothing: antialiased; -> Safari and Chrome
-moz-osx-font-smoothing: grayscale; -> Firefox OSX only

;-)


Reply to this email directly or view it on GitHub
#5898 (comment).

Brian Teeman
Co-founder Joomla! and OpenSourceMatters Inc.
http://brian.teeman.net/

avatar PhilETaylor
PhilETaylor - comment - 29 Jan 2015

You also have to see what a bootstrap mini button looks like - its pretty pants - like in the akeeba screenshot I posted.

I think for this new css to stay a complete look at each and every font, button, layout would be needed to ensure that text sizes and weights were consistent and readable - but then thats only for Mac users so I understand and so would be a waste of time.

I agree that "when I compare screens side by side it is clearer in some places and less clear in others" - first impression of the admin screen was "wooooah this looks crap" which was not a good first impression.

Admittedly in some places like the edit article view, the toolbar looks great

In several other extensions (non-core-joomla ones) the look and feel varies greatly :(

The smaller the font size the worse the effect becomes.

avatar nternetinspired
nternetinspired - comment - 29 Jan 2015

Would anyone be averse to a PR that set font sizes to standard font sizes?

As previously noted these fonts are being used at sizes smaller than they were ever intended to be used at, obviously that leads to them being thinner than intended.

avatar dgt41
dgt41 - comment - 29 Jan 2015

@nternetinspired you have a "go ahead" from me :+1:

avatar JoomliC
JoomliC - comment - 29 Jan 2015
avatar JoomliC
JoomliC - comment - 25 Feb 2015

@nternetinspired We should revert your PR #5755 before release of 3.4.0 (thought it will in rc) as there's a real accessibility issue! And i'm sure that you, and all contributors are concerned about accessibility issue.

You can trust me, i'm colorblind, one of 8% of the men (chromosome issue) other the world (at different degree), and i'm sorry, but for someone like me, a colorblind, there's a real accessibility regression.
Info: http://en.wikipedia.org/wiki/Color_blindness

I agree that your intention was good to clean the blur from your glasses, but the Isis other styles (button, titles, menus...) are not ready and adapted to add the antialiased/grayscale on the full body.

The only place i think it could be a real improvement would be for icons font (as icoMoon online generator does)

Thanks all to take this into consideration.
And if it's better to create a PR with removal, and to add this only for icons, it could be done in the 2 days to come. ;-)

Cyril

Note: No font-smoothing on Github, and that's great! ;-)

avatar JoomliC
JoomliC - comment - 25 Feb 2015

Just see i'm late, and that 3.4.0 was released a few minutes ago... :-|

avatar dgt41
dgt41 - comment - 17 Mar 2015

I just came here through the comment on the hathor…
Can I ask you to do a little test?
Can you change line 51 of isis/less/variables.less to:
@baseFontSize: 14px;
and re run generatecss.php

Does it make any difference?

By the way this is what @nternetinspired mentioned few comments above

avatar JoomliC
JoomliC - comment - 28 Mar 2015

@dgt41 the size is not the only problem (but it's a good idea to set it to 14px as a default value!)

I have less difficulties on my imac with retina screen, but in both cases (imac & macbook), i can only confirm that for me, a joomla admin (and frontend on protostar) is now the only site where i have a weird feeling!

Too, this could be related to the color for body font : #333333 (line 36 @textColor: @grayDark;)
Maybe better by using @grayDarker ?

In the same time, i've found that less file is not using all variables available for small fonts.
In template.less, i have changed this line (147), as it was set to 11px :

/* Typography */
.small {
    font-size: @fontSizeSmall;
}

What's your opinion ?

avatar dgt41
dgt41 - comment - 28 Mar 2015

@JoomliC Cyril why don’t you create a PR with those changes and we continue this conversation there.
Just mention all the people who express some concerns in this issue

avatar JoomliC
JoomliC - comment - 28 Mar 2015

@dgt41 i will as soon as i will test a few other little changes ;-)

avatar PhilETaylor PhilETaylor - change - 1 Jul 2015
Status New Closed
Closed_Date 2015-01-29 09:18:46 2015-07-01 13:59:54
Closed_By PhilETaylor
avatar PhilETaylor PhilETaylor - close - 1 Jul 2015

Add a Comment

Login with GitHub to post a comment