Graphic Design updated site theme is ready for testing!

Question

As part of implementing the new unified themes across the network, we're gradually rolling out updated site themes for each site. As of today, we have enabled your updated site theme for testing.

If you can't see it right now, that's by design! This is a very early test implementation of your design and we need your help finding issues with it before we make it live for everyone permanently. So, keep in mind, there will be things that need fixing! We'll address those things as we can.

If you'd like to review it, here's how:

How do I enable it?

Click here and check the "Beta test new themes" option. This will turn on the new theme for all sites that have one in testing, including this one. Here's more info on how to opt in. You can uncheck the box to revert to the older theme until the site is live for everyone. Note, while turning it on is immediate, it will take a few minutes to revert to the old view - but it will go through!

What type of feedback do we need?

On this post: Bugs related to this site's design elements

Please help us look for issues/bugs related to the theme design and how we have mapped the old theme to the new. This needs to be done within the limits of the new unified theme.

This could include colors of sections of the design or text, problems with JavaScript add-ons (if applicable), the logo or top banner appearance or other artwork.

You can also feel free to ask questions about the new layout if you're unsure how to navigate it.

On Meta Stack Exchange: General concerns about left nav or theming

There are some things that are definitely changing everywhere and can't really be adjusted on a per-site basis. A few of them include:

• Top banner is shorter in height, so some artwork has to be adjusted along with some logos.
• Left Navigation is active everywhere (but can be collapsed into a menu by visiting your site preferences - instructions here).
• Responsive layout is active, which lets the site adjust as browser widths change - no side scrolling (some pages haven't been updated, yet, though). For now, if you prefer the scrolling, you can disable this by clicking the "disable responsiveness" link in the footer.
• Many site elements including tags and voting arrows are standardized across the network.
• Link underlining is active. In an effort to make links more visible, they are now being underlined.

If you have concerns or issues regarding the left nav or the overall approach we are taking to theming, then this Meta Stack Exchange post is the right place for feedback.

As I mentioned earlier, there are some unique design elements like voting arrows and tags that are being standardized in this process. Keeping these custom elements makes our ability to maintain the sites too complex and, while we're very sad to see them go, we're in a difficult position of needing to make the site designs work together so that we can continue to address feature requests and bugs that will make your Q&A experience better. This is addressed in a Meta Stack Exchange post if you want more detail.

What new themes?

If you're like, "What the heck are you talking about?", then you should read the Meta Stack Exchange post entitled Rollout of new network site themes (and maybe the posts it links to for the full background). To follow along with the rollout of these new themes, go here.

Thanks so much for your constructive feedback!

Oh, Who am I?

If you don't know me, I'm one of the Community Managers here at Stack Exchange. I'm here to listen to your input and convey it to our Design team for responses and fixes to bugs. I'll do my best to respond to your concerns and explain whether changes we've made are bugs that can be changed or if they're by design and why.

Answer 1

This is com­par­a­tive­ly hard­er to read now. The left is the old site, the right is the new:

No­tice how much dark­er and small­er the text is now! You’ve dropped the x-height by a whole bunch and picked a much dark­er color for the text. Dark­er text re­quires more lead­ing than light­er text does. Dit­to longer measures.

Here’s the dif­fer­ence in the ro­man set at the same size, with Open Sans first and Ari­al sec­ond:

Notice that the Arial is more compressed. It is also using tighter counters, not open ones. Arial is a low-contrast typeface, lacking the modulated stroke that Open Sans presents:

Because Arial has no italic, its oblique has the same metrics and letterforms as its roman has. But because Open Sans does have italic, the metrics and letterforms differ:

As you see, an italic is more compressed than its roman, but an oblique is not.

About the only thing switching to Arial buys you is that the square tittles probably look better using an old dot-matrix printer than the round ones in Open Sans may:

Arial’s (some­what) small­er x-height and mark­ed­ly in­creased com­pres­sion means you’re now cram­ming even more let­ters to­geth­er on the same line un­der a mea­sure that was al­ready too long to start with and is even worse now. That makes it hard­er to read, and it comes off feel­ing un­so­phis­ti­cat­ed and brutish. Noth­ing says you don’t care about Graph­ic De­sign like giv­ing it a dense and hard-to-read lay­out like this. Look at how ug­ly the para­graphs are now com­pared to be­fore!

Ari­al makes a poor dis­play face due to its low con­trast when set large; it is al­so too dark over­all to make a good dis­play face. Ari­al al­so makes a poor cap­tion face due to the font met­rics push­ing the let­ters too close to­geth­er if you do not over­ride its let­terspac­ing a lit­tle bit to widen them out.

What Bring­hurst writes of Hel­veti­ca is just as true of Ari­al, with bold em­pha­sis mine:

Hel­veti­ca is a twen­ti­eth-cen­tu­ry Swiss re­vi­sion of a late nine­teenth cen­tu­ry Ger­man Real­ist face. ... The heavy, un­mod­u­lat­ed line and tiny aper­ture evoke an im­age of un­cul­ti­vat­ed strength, force, and per­sis­tence. The very light weights is­sued in re­cent years have done much to re­duce Hel­veti­ca’s coarse­ness but lit­tle to in­crease its read­abil­i­ty.

Ari­al is not as read­able a type­face as many oth­ers, par­tic­u­lar­ly set like this. It’s cer­tain­ly a lot worse than what we had. That’s be­cause the mea­sure is much too long and the lead­ing is much too tight, and the font is stuck at the very same size no mat­ter the view­port. That isn't re­spon­sive.

Look how with Open Sans, you can use smart quotes after an f glyph, but with Ar­ial you can­not, as shown on the ti­tle of this ques­tion:

In his article on Why Helvetica is not great, Martin Silvertant writes:

I strong­ly sus­pect that if Hel­veti­ca is your fa­vorite type­face, you sim­ply haven’t seen a lot of pro­fes­sion­al type­faces. Type­faces like Triv­ia Grotesk, Voice, Bu­lo, Six­ta, Adelle Sans, Ar­gu­men­tum, Supria Sans and Air Soft are cer­tain­ly not for ev­ery project, but they’re very at­trac­tive grotesque type­faces. Grotesque isn’t my per­son­al fa­vorite style though (but per­son­al pref­er­ence shouldn’t mat­ter much when con­sid­er­ing a type­face for a project); I’m very fond of hu­man­ist sans type­faces and type­faces with some quirks. Type­faces like Win­co, Ideal Sans, Sonus, Tabac Sans (Fig­ure 8), An­des, Un­i­man and Karmi­na Sans are ab­so­lute­ly amaz­ing to me. Speak­ing of quirks, I still ad­mire the clas­sic Gill Sans.

Again, the same words there spo­ken of Hel­veti­ca ap­ply in equal mea­sure to Ari­al.

Please have some respect for the Graphic Design SE site and give it the professional typography treatment which GD of all possible SE sites so richly deserves. Other­wise you might as well mi­grate all GD site con­tent to Stack Over­flow. It sure looks like you al­ready have. :-(

Please use a hu­man­ist sans, not a neo-gro­tesque one, and prefer­ably one with a re­al ital­ic like Open Sans has, not just a lame oblique like Ari­al has. Bet­ter yet, sim­ply put the old typeface back so it doesn’t look so un­so­phis­ti­cat­ed and bru­tish the way it does now.

Answer 2

To be honest, you should have known you were going to catch some wind asking a bunch of designers about a design you're forcing on them. So here goes my honest feedback. Some of it is constructive, some isn't, deal with it.

• Why all the borders everywhere? They just make the design heavier, and don't add anything.
• Please give us at least our colour back. The blue is just not right together with the logo.
• Everything feels really cramped. Give the design some air, let it breathe.
• Box-shadows? What is this, 2006?
• There are three different styles for tabs, this is a bit excessive in my opinion.
• Arial is just a horrible typeface, please give us back our Open Sans.

I took the liberty of adapting the current designs to my liking. I stayed within the constraints of the current design as much as possible. For example, I kept the sidebar, since that is here to stay. All changes were done in the DevTools of my browser, so they're not complex to do and don't require extra files or anything like that. Below an overview, I've also noted the things I've changed in do far as they are not mentioned above.

Homepage

• I've given the logo the love it deserves.
• The yellow in the meta featured box is just not right.
• There's at least six shades of grey on the page. It's really confusing, not to mention hell for people who cannot see contrast very well.
• Notice how things that are important (titles, buttons) actually stand out.

Question page

• The question and the comments now look like text instead of blocks of black.
• Again, the yellow of the Meta box was just not necessary.
• Notice how the scores of the related questions now line up with those questions.
• There's just a bit more space between the question and the right bar, so they don't feel so jammed against each other.

User page

• I still feel this is cramped, but since it's a dashboard I'm willing to make some allowances here.
• I did add some spacing in the top boxes.
• Notice how the important bits (like the titles) now stand out a bit more.

---

_{PS: Here's a link to the original images because imgur absolutely destroyed them during compression.}

Answer 3

feature-request

My eyes really hurt when trying to read questions, Arial is very harsh as compared with our current font of Open Sans.

---

Our site really enjoys Open Sans. Check out this post post from Scott back when it was introduced.

Also keep in mind that lots of posts will get reformatted incorrectly with the new font, see this comment

Answer 4

If you're not going to listen to our feedback at all, constructive or no, you might as well not ask it.

Answer 5

Rendering Regression Bug

The site’s old style sheet had this bit of CSS:

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-image: url('img/pattern.png?v=157ec8bfa05b');
    background-position: top left;
    background-repeat: repeat;
    background-color: #FFF
}

But the new one lacks those first two crit­i­cal lines. I sus­pect they were delet­ed by ca­su­al ac­ci­dent, but we need them.

The orig­i­nal de­sign­er of the site theme put those first two lines in be­cause they are ᴄ ʀ ɪ ᴛ ɪ ᴄ ᴀ ʟ to al­low light-on-dark text to ren­der cor­rect­ly un­der (for ex­am­ple) Chrome or Fire­fox.

This may be par­tic­u­lar­ly bad on Macs, so if the peo­ple eval­u­at­ing what the site looks like are on­ly us­ing In­ter­net Ex­plor­er un­der Win­dows, they wouldn’t even re­al­ize they’d messed some­thing up that used to work right on this site. That might al­so ex­plain why they think they should set so black a type­face with such a small font size, long mea­sure, and tight lead­ing: they don’t re­al­ize how black it is.

Demonstration

To il­lus­trate how aw­ful this ef­fect is, here are pairs of rows where the odd-num­bered rows are left at the de­fault and the even-num­bered rows have the two spe­cial CSS di­rec­tives ap­plied to them:

   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

Here’s a small re­pro case:

<html>
<head>
<style>
p.smooth-right {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
p.smooth-wrong {
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}
</style>
</head>
<body style="font-family: Georgia; color: white; background-color: red">
  <p class="smooth-wrong">1. This is regular smoothed wrong.</p>
  <p class="smooth-right">2. This is regular smoothed right.</p>
  <p class="smooth-wrong"><b>3. This is bold smoothed wrong.</b></p>
  <p class="smooth-right"><b>4. This is bold smoothed right.</b></p>
</body>
</html>

Which looks like this on Chrome on a Mac:

And like this un­der Fire­fox on a Mac:

On a Win­dows box, the even- and odd-num­bered lines are iden­ti­cal whether ren­dered in Fire­fox, Chrome, or In­ter­net Ex­plor­er. On a Mac, the odd-num­bered line are just grossly overweight (the reg­u­lar be­comes a bold, the bold be­comes a black) whene­ver you have light text on a dark field un­less you add those two mag­ic CSS di­rec­tives.

---

More Extensive Samples

Here’s a close-up of the prob­lem, where the top pair is the ren­der­ing on a Mac and the bot­tom pair is the ren­der­ing on Win­dows — both on the same mon­i­tor. The first line is the de­fault view on the Mac, and this is the one that isn’t right. The oth­er three look pret­ty much the same as each oth­er.

Mac on top, Windows on bottom

No­tice how in that top-most row where it’s much too bold, the three bold cells in par­tic­u­lar have se­ri­ous prob­lems. Th­ese are columns 1, 4, and 5. The coun­ters have been re­duced to mere pin­pricks; for ex­am­ple, look at the bot­tom of the low­er­case a, the top of the up­per­case A, or the top of the low­er­case e. This is more like a black’s 900 weight than a bold’s 700 weight. All the let­ters are run to­geth­er too tight­ly be­cause the font met­rics are not de­signed for this sort of cap­tion-sized use, let alone as a black not a bold. More on than in a sep­a­rate post.

Chrome on Mac, set in Arial

Firefox on Mac, set in Arial

No­tice how dif­fer­ent the odd-num­bered rows are from the even-num­bered rows, par­tic­u­lar­ly when you have light-col­ored text set against a dark­er back­ground col­or. The reg­u­lar text comes out look­ing like it’s bold, and the bold text is much much too dark, re­al­ly a black not a bold in ty­pog­ra­pher­ese.

This is no better in Georgia, either.

This is even worse at the teen­sy tiny sizes you tend to pick for these in places where you use white text against a dark­er back­ground, like for but­tons and for scores, or up in the top bar:

Chrome on Mac, set in Arial (small)

Chrome on Mac, set in Georgia (small)

As you see, this all looks com­plete­ly aw­ful if you al­low the de­fault font smooth­ing to have its way with you on a Mac. It is all much too hard to read. Plus you are us­ing Win­dows fonts on a Mac, so even cor­rect­ed they still come out way too dark com­pared with us­ing Mac fonts on a Mac. That is an­oth­er rea­son to use Open Sans not Ari­al here.

Summary

Please, please add (re­store) these two CSS lines to ev­ery sin­gle Stack Ex­change site on the en­tire net­work:

   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

Answer 6

Good para­graphs re­flows now

One thing does look bet­ter: the para­graph re­flows when you change your win­dow size.

Look in par­tic­u­lar at what hap­pens to the para­graphs here when you slow­ly nar­row or broad­en the win­dow width: the right-hand edges change dy­nam­i­cal­ly.

You can test this out by look­ing at my three an­swers here to this meta-ques­tion.

We’re still us­ing the same lead­ing and font size no mat­ter the con­tain­er, though, so what looks good on desk­top doesn’t look good on cell­phones, and vice ver­sa. But they said they have not yet got­ten to the non-desk­top site.