1143084 - Remove unused fonts from code base

Status: RESOLVED FIXED

(developer.mozilla.org Graveyard :: Code Cleanup, defect)

Description

[Stephanie Hobson [:shobson]]

All of these need further investigation but at a glance:

- moztt does not appear to be applied anywhere
- league gothic is used only as a fall back for another webfont (bebas)
- carto is declared once but appears be be over-written by the cascade and never displays

Comment 1

[David Setz]

I'd be glad to do the investigating as well as proposing and possibly implementing a fix.
This would be my first contribution so something that forces me to dig through the codebase seems appropriate.

Comment 2

[Luke Crouch [:groovecoder]]

david - great, do you need anything before you get started?

Comment 3

[David Setz]

I don't think so. I think for now I'll be busy getting everything up and running. If I hit a blocker I'll get back, thank you.

Comment 4

[Stephanie Hobson [:shobson]]

Yay! Thank you David :) 

Something I wondered about but did not include in the bug description was: is League Gothic specified as a fall back because we didn't have Bebas in the correct format for one of the browsers, or was it related to the fact that Bebas is only available in all caps?

Also, if you do find that Carto is used and is displaying, I think it would be worth while to remove it from the code base and use one of the other fonts at our disposal :)

I'm another good option if you have questions.

Comment 5

[David Setz]

I actually ran into a question: Is the whole media directory relevant or just the redesign directory?

Comment 6

[Luke Crouch [:groovecoder]]

:openjck just recently moved all the 'redesign' resources into the 'media' directory. [1] So, if you're looking at the latest master branch, there should only be a 'media' directory. :)

[1] https://github.com/mozilla/kuma/pull/3099

Comment 7

[David Setz]

Thanks Luke, but this answers the question only partially. My question mainly concerned the "gaia" directory, because it's the only place I found references to the moztt font. On that note: Is the logic behind the code structure documented anywhere? It might become more obvious once I had time to really dive into the code, but I hadn't have the time yet.

Comment 8

[Luke Crouch [:groovecoder]]

:openjck or :shobson can correct me, but I didn't find a single reference to the media "gaia" anywhere in our codebase.

Comment 9

[Stephanie Hobson [:shobson]]

The gaia stuff is used to make in-page simulations of the Gaia UX: https://developer.mozilla.org/en-US/Apps/Design/Firefox_OS_building_blocks/1.x/Tabs/Coding This is very obscure and I only found out myself last week.

There isn't any documentation of the logic behind the code structure but I can give you some history that might help:
- the demos portion of the site was built out separately by a contractor several years ago and was originally independent of the rest of MDN, when the MDN site was redesigned and made responsive there was some (but not a lot) of integration. 
- the dev derby site has a similar origin but has had even less recent attention
- the main block of MDN supporting CSS is transitioning into a more modular file structure. The style of wiki.styl and it's supporting files is the direction we're going but it's not uniformly that way yet.

Comment 10

[David Setz]

Thank you Stephanie, that helped a lot :)

My findings:
- moztt is actually included twice (moztt.styl & opensans.styl)
- moztt is only used for Gaia demos
- League Gothic is indeed only used as a fallback for bebas although I can't find a reason for it. Almost all Bebas declarations are accompanied by "text-transform: uppercase" and even when it's not it's just displayed as all-caps. Font types also appear to be complete
- Carto was mostly used for the dev derby (which no longer exists). Uses outside of the dev derby are overwritten (https://developer.mozilla.org/de/demos/detail/bananabread#demo-sub => headlines)
- Bebas was also mostly used for dev derby. I only found 11 uses outside of it

Propsed actions:
moztt: If all Gaia demos reside in iFrames the parent site should take care of the font. If this is not the case the font inclusion should be limited to sites demoing Gaia. Also remove the include in opensans.styl
League Gothic: Remove it
Carto: Remove it
Bebas: I would take a closer look at all implementations, but first impression is that the limited usage 
does not justify the added baggage. Hence I'd suggest to remove Bebas as well and switch uses to Open Sans (If my initial impression holds up)

Not really in the scope of this ticket, but did you ever think about an oocss approach? The approach in wiki.styl makes it a lot easier to quickly get into the code, but it will still result in a lot of redundancy. When tasked with bigger platforms I'm a big fan of living styleguides (e.g. http://ux.mailchimp.com/patterns/), because it enforces modular thinking and makes testing a lot easier. Also for ongoing platforms it is always nice to have a set of components to quickly throw something new together.

Comment 11

[Stephanie Hobson [:shobson]]

We're absolutely working on an OOCSS/SMACSS approach but it's a legacy code base and it's not a high priority because it's all working right now. A style guide may be on the plan for Q3 or Q4 this year. We're especially in need of it for form stuff because each form seems to be a one off case at the moment :(

Thank you for doing this investigation! Are you also interested in taking your proposed actions?

> moztt: If all Gaia demos reside in iFrames the parent site should take care of the font. If this is not the case the font inclusion should be limited to sites demoing Gaia. Also remove the include in opensans.styl

iframes don't inherit from their parent sites and the font.css file the demos are referencing doesn't exist on the server so the demos are not even displaying in moztt right now. #facepalm

I think we should make a font.css file inside /media/gaia/shared/style/ and edit all the demos to include that file. I'm not sure where the demos are stored so I'll ask around.

It should definitely come out of opensans.styl

> League Gothic: Remove it

Yay!

> Carto: Remove it

Yay!

> Bebas: I would take a closer look at all implementations, but first impression is that the limited usage does not justify the added baggage. Hence I'd suggest to remove Bebas as well and switch uses to Open Sans (If my initial impression holds up)

I think having a different heading font is still important to the demos site for conveying the hierarchy and the design breaks down with a wider font but I bet we could get away with switching to a font stack based on Arial Narrow. We should make a mockup of what that would look like so we can propose it to someone with the authority to okay design decisions. Any interest in doing that? If not I can whip one up.

Thank you again for doing the digging :)

Comment 12

[David Setz]

I'd love to implement the changes as well.
Concerning the Bebas headline I think it's worth noting that only the "about this demo" & "more from this author" headlines actually use it. The main content is just using variants of Open Sans. Almost feels like a left over. I'm attaching two screenshot to show current implementation vs Open Sans only.

Concerning the OOCSS/SMACSS approach: It's really weird how companies are not happy to pay you to refactor perfectly fine code to make it pretty :D Jokes aside is this something you will handle internally or is there a chance to participate?

Comment 13

[David Setz]

Attachment: Mixed Open Sans and Bebas headlines

Comment 14

[David Setz]

Attachment: Only Open Sans headlines

Comment 15

[Stephanie Hobson [:shobson]]

It's the usage on the home page that I'm most concerned about. Specifically, the "browse by technology" button and the demo titles in the cards but I think if we are careful with letter spacing and font size we can make the swap without breaking anything :)

The re-factor is kind of a difficult thing to hand off to someone who isn't part of the team because it often involves decisions that have to be discussed with everyone. On the other hand, it keeps getting put off because of more pressing work so maybe we can't be trusted with it :P If you wanted to take a crack at it I could try to document the vision I'm working towards and you could pick a stylus file and get started. We should open a bug for you to work under if that's the case :)

Comment 16

[Stephanie Hobson [:shobson]]

Justin, could you please compare the attachments in comment 13 and comment 14 and let us know if it's okay to change the font face from Bebas (the narrow all caps font) to Open Sans (the font we use everywhere else). Removing this font will make the demos site load faster and reduce the number of fonts we have to maintain.

Comment 17

[Justin Crawford [:hoosteeno] [:jcrawford]]

I say "yes" based on the technical merits (fewer requests, woo!) and on a common design principle I have heard that says, "use fewer typefaces." I am needinfo'ing smartell in case he has strong opinions to the contrary.

Comment 18

[David Setz]

Stephanie if you already have a clear vision and can document it I'll give it a shot.

Comment 19

[Stephanie Hobson [:shobson]]

David, I'm not sure I'll have time for a while (it's the end of our quarter) but we have the go-ahead to remove the fonts at least :)

Comment 20

[David Setz]

No worries, I have a full-time job and thus am familiar with the ebb and flow of spare time :)
I'll try to finish up the font removal this week.
Thank you for all the help and if you get around to refactoring and think I can help you can find my details over at https://mozillians.org/en-US/u/davidyezsetz/

Comment 21

[David Setz]

Took a bit longer than expected but I https://github.com/mozilla/kuma/pull/3198 has been filed :)

Comment 22

[Sean Martell]

I'm late to the game on this, but Bebas should no longer be in use on the site anyway. That's a relic of the previous style.

I won't mention we most likely should replace all instances of Open Sans with Fira Sans. ;)

More on that in a little bit.

Comment 23

[MDN Team (:mdn-dev)]

Commits pushed to master at https://github.com/mozilla/kuma

https://github.com/mozilla/kuma/commit/60c8fd028fb4308f79adde3eaa308d8a47ce2140
Bug 1143084: Remove font "League Gothic" and all references

https://github.com/mozilla/kuma/commit/14550791392b739f6d4dd7d68677f410c4756a89
Bug 1143084: Remove font "Carto" and all references

https://github.com/mozilla/kuma/commit/d6d8452116fd6d61eabeb1190c4198d2d4291906
Bug 1143084: Remove font "Bebas Neue" and replace uses with "$heading-font-family"

https://github.com/mozilla/kuma/commit/1f2bd75ae4e0a8e08071908ab49cfb537da9a5bf
Bug 1143084: Remove moztt inclusion from opensans.styl

https://github.com/mozilla/kuma/commit/f7778362ca608d4696642795fd250735287b73be
Bug 1143084: Remove moztt from the main stylesheet as the font is not used on the site

https://github.com/mozilla/kuma/commit/5e0ba1c12d7ce44cc9ded3dc6b0fe1b4d0ba9cfa
Bug 1143084: Set letter spacing for `.demo-title` to 0

https://github.com/mozilla/kuma/commit/fb02a231f92599255426f5f5d8d301acdf1c8321
Bug 1143084: Vertically center and uppercase `.gallery-head .count`

https://github.com/mozilla/kuma/commit/b4c973776b9faffde4c9e3340265ef53961505f5
Merge pull request #3202 from openjck/pr3198-bug-numbers

Bug 1143084 remove unused fonts from code base

Comment 24

[David Setz]

Sean, this is actually not a big deal since all the other work needed to be done anyway ;)
When you do need to exchange open sans feel free to ping me. I know where everything is now :)

Comment 25

[David Setz]

Shouldn't this be closed?

Comment 26

[Stephanie Hobson [:shobson]]

I need to follow up to make sure the Gaia demos are displaying properly. I'll try to do that today instead of putting it off again.

Comment 27

[MDN Team (:mdn-dev)]

Commits pushed to master at https://github.com/mozilla/kuma

https://github.com/mozilla/kuma/commit/50852ceed9d900b9cf7ecf65159854997684ab02
Fix Bug: 1143084 - moztt use

https://github.com/mozilla/kuma/commit/6bfa82fe484d92e855ca2f8c5b991741fd5c94be
Merge pull request #3217 from stephaniehobson/bug-1143084-moztt-font

Fix Bug: 1143084 - moztt use