735750 - Change SUMO font, size

Status: RESOLVED FIXED

(support.mozilla.org :: General, defect, P2)

Description

[Bram Pitoyo [:bram]]

This one needs careful configuration because it could break layout, particularly if we start messing around with the sidebar text elements.

Comment 1

[:ibai]

Do you mean, increase all the text sizes?

I believe that we should start by reducing texts sizes that are taking too much space like h1s that are not really h1s and so on. They are plenty of cases scattered around the site.

Comment 2

[Bram Pitoyo [:bram]]

(In reply to Ibai from comment #1)
> Do you mean, increase all the text sizes?
> 
> I believe that we should start by reducing texts sizes that are taking too
> much space like h1s that are not really h1s and so on. They are plenty of
> cases scattered around the site.

Not all the text sizes, but mostly body text elements. And your idea of starting with the heading is a good one.

This problem might also be fixed by simply changing the body text family to sans serif like Helvetica and Arial, because they both look bigger than Georgia. I was afraid of doing it along with bug 719981 and causing too many drastic changes, but now may be a good time.

Comment 3

[Kadir Topal [:atopal]]

Yeah, let's use this bug to do that. I'm changing the title accordingly:

This is the suggestion from bug 719981. Bram, does this still hold?

body {
13px/1.231 "Helvetica Neue", "Nimbus Sans L", Arial, sans-serif;
}

Ricky, please waffle this for logged-in users first.

Comment 4

[Bram Pitoyo [:bram]]

It still holds, but there are a few other areas that needs changing from Georgia to Helvetica, as well as others where Helvetica Italic just looks plain ugly.

I will give you the lines to change in a minute.

Comment 5

[Bram Pitoyo [:bram]]

html {
/* replace */
/* base color of the body should remain the same throughout the site */
color: #282828;
}

body {
font: 13px/1.231 "Helvetica Neue", "Nimbus Sans L", Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
/* add */
/* keep the header font Georgia, for now - and keep it normal weight */
font-family: Georgia, serif;
}

.sd-module h1 {
/* erase the color line */
/* the color was blue, but it’s not clickable, so it should remain black */
}

.sd-module h1 mark {
/* erase the color line */
/* the color was blue, but it’s not clickable, so it should remain black */
}

.sd-module a {
/* erase the font-family line */
}

#support-for h1 {
/* replace */
font-size: 20px;
font-style: italic;
}

#support-for input {
/* replace */
color: #0051B9;
}

input[type="button"], input[type="submit"]:not(.remover), section.marky button, a.btn {
/* erase the font-family line */
}

#footer {
/* erase the font-family line */
}

#footer li li a:link, #footer li li a:visited {
/* replace */
/* make footer link font consistent with the rest of the site */
font-family: "Helvetica Neue", "Nimbus Sans L", Arial, sans-serif;
}

Erase these lines entirely because the fonts are inconsistent:
1 .sumo-header
2 #support-for
3 #side

Comment 6

[Bram Pitoyo [:bram]]

I am saving this link to the Sandstone style for later implementation, when we might want to change our h1-h6 font to Open Sans:

http://www-dev.allizom.org/b/en-US/sandstone/

Comment 7

[Bram Pitoyo [:bram]]

Before we change more sizes, I would like to deploy this change first and then see if there are text reflow problem (Helvetica occupies more space compared to Georgia).

Comment 8

[Ricky Rosario [:rrosario, :r1cky]]

Landed in prod.

https://github.com/mozilla/kitsune/commit/3e2b280138602073ecaf97e4af39124cc8b4417c