Drop Adelle Sans for Open Sans #359

Merged
merged 24 commits into from Mar 3, 2014

Projects

None yet

5 participants

@mdo
Member
mdo commented Mar 1, 2014

I'm proposing we drop Adelle Sans and use Source Sans Pro from Google Web Fonts. Apparently this shaves 300kb off the docs file size, a huge win for #354. Plus, rather than font-weight: 100 everywhere in media queries, we stick to one font weight, no matter the screen. This means nullifying #351.

Visually, they look pretty similar to me, and that page load is huge.

Before

screen shot 2014-03-01 at 12 01 02 pm

After

screen shot 2014-03-01 at 12 05 36 pm

@zdroid
Contributor
zdroid commented Mar 1, 2014

Good idea.

@mdo mdo added the docs label Mar 1, 2014
@mdo mdo added this to the 2.0.1 milestone Mar 1, 2014
@juthilo juthilo commented on an outdated diff Mar 1, 2014
docs/_includes/header.html
@@ -8,12 +8,13 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
-<!-- Roboto -->
-<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,500,700">
+<!-- Google Web Fonts -->
+<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,500,700&Source+Sans+Pro:300,400,600,700">
@juthilo
juthilo Mar 1, 2014 Member

https://developers.google.com/fonts/docs/getting_started#Syntax says to use | as separator between multiple fonts.

@connors
Member
connors commented Mar 1, 2014

Yeah, I like Adelle as a font better but this is clearly a win.

@mdo
Member
mdo commented Mar 1, 2014

I've switched this PR to use Open Sans because Source Sans Pro is rather short compared to both fallback fonts and the current Adelle Sans. It'd require a lot of font-size changes. Using Open Sans simplifies that.

I've also made some other modifications here:

  • Added a .docs-content class to the main column for scoped type styles. Otherwise, everything would be inherited in the device examples.
  • Refactored the type styles in the docs to use em units for easy scaling across media queries. These are the ones scoped in the previous bullet.
  • Removed the .docs-steps component because flat content just seems to make more sense here.
  • Removed the additional font-weights so Open Sans is only called in 300.
  • Removed the .section-* classes as well since those should just use standard type styles.
  • Saving the files in Atom nuked some rogue trailing spaces on a few line—I suggest everyone here update their editor preferences to nuke trailing whitespace on save.
  • Added a heading to the first section of the Getting Started page because it looked a bit odd without it.

Still have a few tweaks to make given the font change, but overall it's pretty on par with what we're rocking today, minus 300kb still.

screen shot 2014-03-01 at 2 21 07 pm
screen shot 2014-03-01 at 2 21 14 pm
screen shot 2014-03-01 at 2 21 25 pm

@mdo mdo referenced this pull request Mar 1, 2014
Closed

v2.0.1 ship list #275

@connors
Member
connors commented Mar 2, 2014

🆒 so I went through and took care of merging master. I also updated the examples page to be a bit simpler and use the grid.

Speaking of the grid, I simplified that too. I went ahead and got rid of the extra padding as the screens got bigger. I really didn't like it that much and it made the examples look bad.

@XhmikosR
Member
XhmikosR commented Mar 2, 2014

👍 for Open Sans

@XhmikosR XhmikosR commented on an outdated diff Mar 2, 2014
docs/_includes/header.html
@@ -8,12 +8,13 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
-<!-- Roboto -->
-<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,500,700">
+<!-- Google Web Fonts -->
+<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,500,700|Open+Sans:300">
@XhmikosR
XhmikosR Mar 2, 2014 Member

Perhaps just use the protocol relative URL here?

mdo added some commits Mar 3, 2014
@mdo mdo Merge branch 'master' into optimize_docs_fonts
Conflicts:
	docs/_includes/header.html
	docs/getting-started.html
	sass/docs.scss
84a532e
@mdo mdo Merge branch 'optimize_docs_fonts' of github.com:twbs/ratchet into op…
…timize_docs_fonts

Conflicts:
	docs/examples.html
	docs/getting-started.html
	sass/docs.scss
5ccaea5
@mdo mdo Merge branch 'master' into optimize_docs_fonts 9471ad2
@mdo mdo Drop the protocol 702a48d
@mdo mdo merged commit b8948bb into master Mar 3, 2014
@mdo mdo deleted the optimize_docs_fonts branch Mar 3, 2014
@connors
Member
connors commented Mar 3, 2014

@zdroid
Contributor
zdroid commented Mar 3, 2014

@connors footer.html is missed. #399

@connors
Member
connors commented Mar 3, 2014

@ZDroid Already merged.

@zdroid
Contributor
zdroid commented Mar 3, 2014

@connors You merged the pull request before I sent the comment, lol!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment