Typography configurations

[KyleAMathews]

Put together a really nice configuration? Add it here so others can learn. The best of these will get added to the README.md and the app.

[KyleAMathews]

This configuration was inspired by BoingBoing.net — very nice longform text setup.

http://kyleamathews.github.io/typography.js/#/?headerFontFamily=Lora&baseFontSize=18px&bodyGray=17&headerWeight=700&googleBodyFont=Lora&baseLineHeight=26px&bodyFont=Lora&modularScales=major%20third&googleHeaderFont=Lora&bodyFontFamily=Lora&headerFont=Lora

[KyleAMathews]

This configuration was inspired by http://buytaert.net/ — nice and simple Open Sans with a lighter gray for the headers. Excellent for blogs.

http://kyleamathews.github.io/typography.js/#/?headerFontFamily=Open%20Sans&bodyGray=27&headerWeight=700&googleBodyFont=Open%20Sans&headerGray=47&bodyFont=Open%20Sans&modularScales=minor%20third&googleHeaderFont=Open%20Sans&bodyFontFamily=Open%20Sans&headerFont=Open%20Sans

[KyleAMathews]

Taken from http://hellohappy.org/beautiful-web-type/ — Big bold Open Sans paired with Gentium Book Basic. Dramatic and very readable.

http://kyleamathews.github.io/typography.js/#/?headerFontFamily=Open%20Sans&googleHeaderFont=Open%20Sans&headerFont=Open%20Sans&headerWeight=700&modularScales=phi&bodyFontFamily=Gentium%20Book%20Basic&googleBodyFont=Gentium%20Book%20Basic&bodyFont=Gentium%20Book%20Basic

[KyleAMathews]

Source Sans Pro is hugely popular for building UIs. This configuration setups everything up

http://kyleamathews.github.io/typography.js/#/?headerFontFamily=Source%20Sans%20Pro&googleHeaderFont=Source%20Sans%20Pro&headerFont=Source%20Sans%20Pro&bodyFontFamily=Source%20Sans%20Pro&googleBodyFont=Source%20Sans%20Pro&bodyFont=Source%20Sans%20Pro&modularScales=minor%20third

[KyleAMathews]

Neuton is another very nice very readable font

http://kyleamathews.github.io/typography.js/#/?headerFontFamily=Open%20Sans&baseFontSize=18px&googleBodyFont=Neuton&baseLineHeight=25px&bodyFont=Neuton&modularScales=minor%20third&googleHeaderFont=Open%20Sans&bodyFontFamily=Neuton&headerFont=Open%20Sans

[KyleAMathews]

Merriweather is a very nice serif

http://kyleamathews.github.io/typography.js/#/?headerFontFamily=Merriweather&googleHeaderFont=Merriweather&headerFont=Merriweather&bodyFontFamily=Merriweather&googleBodyFont=Merriweather&bodyFont=Merriweather&headerWeight=900&modularScales=diminished%20fourth

[KyleAMathews]

A very airy configuration with 100 weight Lato and Laro with large line spacing

http://kyleamathews.github.io/typography.js/#/?headerWeight=100&modularScales=major%20sixth&bodyGray=40&bodyFontFamily=Lora&googleBodyFont=Lora&bodyFont=Lora&baseFontSize=16px&baseLineHeight=27px

[KyleAMathews]

And a very dense configuration heavy Oswald and PT Sans Narrow combine to really get in your face

http://kyleamathews.github.io/typography.js/#/?headerFontFamily=Oswald&baseFontSize=20px&bodyGray=20&headerWeight=700&googleBodyFont=PT%20Sans%20Narrow&baseLineHeight=24px&bodyFont=PT%20Sans%20Narrow&modularScales=golden&googleHeaderFont=Oswald&bodyFontFamily=PT%20Sans%20Narrow&headerFont=Oswald

[KyleAMathews]

This configuration was inspired by the blogging platform Ghost. A pleasant combination of Open Sans and Merriweather

http://kyleamathews.github.io/typography.js/#/?headerFontFamily=Open%20Sans&baseFontSize=18px&bodyGray=30&headerWeight=700&googleBodyFont=Merriweather&baseLineHeight=31px&bodyFont=Merriweather&googleHeaderFont=Open%20Sans&bodyFontFamily=Merriweather&headerFont=Open%20Sans

[jocubeit]

Hey just thought I'd let you know, Merriweather example (7th comment above) isn't working... 404 error.

[KyleAMathews]

@MeetDom thanks! I changed this repo's name recently and thought I'd updated all the links but missed one :)

[KyleAMathews]

Inspired by the lovely typography on stripe.com http://kyleamathews.github.io/typography.js/#/?headerFontFamily=Open%20Sans&baseFontSize=14px&bodyGray=47&googleBodyFont=Open%20Sans&baseLineHeight=21px&headerGray=18&bodyFont=Open%20Sans&modularScales=minor%20third&googleHeaderFont=Open%20Sans&bodyFontFamily=Open%20Sans&headerFont=Open%20Sans

Uses the free font Open Sans instead of Whitney SSm A

[KyleAMathews]

Copied from the 2015 Wordpress theme. Uses the lovely Google Font Nova Serif http://kyleamathews.github.io/typography.js/#/?headerFontFamily=Noto%20Serif&baseFontSize=19px&bodyGray=20&headerWeight=700&googleBodyFont=Noto%20Serif&baseLineHeight=32px&bodyFont=Noto%20Serif&modularScales=minor%20third&googleHeaderFont=Noto%20Serif&bodyFontFamily=Noto%20Serif&headerFont=Noto%20Serif

Compare https://twentyfifteendemo.wordpress.com/about-twenty-fifteen/

[KyleAMathews]

Copied from the 2014 Wordpress theme. Uses the very popular Lato

http://kyleamathews.github.io/typography.js/#/?headerFontFamily=Lato&baseFontSize=16px&bodyGray=17&headerWeight=400&googleBodyFont=Lato&baseLineHeight=24px&headerGray=17&bodyFont=Lato&modularScales=major%20third&googleHeaderFont=Lato&bodyFontFamily=Lato&headerFont=Lato

Compare https://twentyfourteendemo.wordpress.com/

[KyleAMathews]

2013 Wordpress theme. Bitter paired with Source Sans Pro

http://kyleamathews.github.io/typography.js/#/?headerFontFamily=Bitter&googleHeaderFont=Bitter&headerFont=Bitter&bodyFontFamily=Source%20Sans%20Pro&googleBodyFont=Source%20Sans%20Pro&bodyFont=Source%20Sans%20Pro&headerGray=7&bodyGray=7

Compare https://twentythirteendemo.wordpress.com

[KyleAMathews]

2012 Wordpress theme. Open Sans for header and body

http://kyleamathews.github.io/typography.js/#/?headerFontFamily=Open%20Sans&baseFontSize=14px&bodyGray=27&googleBodyFont=Open%20Sans&headerGray=27&bodyFont=Open%20Sans&modularScales=minor%20third&googleHeaderFont=Open%20Sans&bodyFontFamily=Open%20Sans&headerFont=Open%20Sans

compare https://twentytwelvedemo.wordpress.com/

[KyleAMathews]

Lovely open sans for headers + lora for body. Even gray across headers and body.

http://kyleamathews.github.io/typography.js/#/?headerFontFamily=Open%20Sans&baseFontSize=20px&bodyGray=25&headerWeight=900&googleBodyFont=Lora&baseLineHeight=30px&headerGray=25&bodyFont=Lora&modularScales=perfect%20fifth&googleHeaderFont=Open%20Sans&bodyFontFamily=Lora&headerFont=Open%20Sans

Inspired by http://blog.juxt.pro/index.html

[KyleAMathews]

Can't configure this easily in the tool yet as can't enter 300 weight for headers but Google's Cloud docs site has very nice typography. 300 weight Open Sans on headers and Roboto for the body.

https://cloud.google.com/storage/docs/website-configuration

Edit: http://kyleamathews.github.io/typography.js/#/?headerFontFamily=Open%20Sans&baseFontSize=14px&bodyGray=13&headerWeight=400&googleBodyFont=Roboto&googleFonts%5B%5D%5Bname%5D=Lato&googleFonts%5B%5D%5Bstyles%5D%5B%5D=100&googleFonts%5B%5D%5Bstyles%5D%5B%5D=400&googleFonts%5B%5D%5Bstyles%5D%5B%5D=700&googleFonts%5B%5D%5Bstyles%5D%5B%5D=900&baseLineHeight=22px&bodyFont=Roboto&modularScales%5B%5D=major%20third&googleHeaderFont=Open%20Sans&bodyFontFamily=Roboto&headerFont=Open%20Sans

[KyleAMathews]

Playfair Display and Droid Serif. Hadn't looked closely at Droid Serif before but it's quite nice http://kyleamathews.github.io/typography.js/#/?headerFontFamily=Playfair%20Display&baseFontSize=18px&bodyGray=27&headerWeight=900&googleBodyFont=Droid%20Serif&baseLineHeight=28px&headerGray=13&bodyFont=Droid%20Serif&modularScales=major%20third&googleHeaderFont=Playfair%20Display&bodyFontFamily=Droid%20Serif&headerFont=Playfair%20Display

Inspired by http://siliconvalley.town/

[KyleAMathews]

Emulate the US web design standard just released!

https://playbook.cio.gov/designstandards/visual-style/#pairings

http://kyleamathews.github.io/typography.js/#/?headerFontFamily=Merriweather&baseFontSize=17px&googleBodyFont=Source%20Sans%20Pro&googleFonts%5B%5D%5Bname%5D=Lato&googleFonts%5B%5D%5Bstyles%5D%5B%5D=100&googleFonts%5B%5D%5Bstyles%5D%5B%5D=400&googleFonts%5B%5D%5Bstyles%5D%5B%5D=700&googleFonts%5B%5D%5Bstyles%5D%5B%5D=900&baseLineHeight=26px&bodyFont=Source%20Sans%20Pro&modularScales%5B%5D=major%20third&googleHeaderFont=Merriweather&bodyFontFamily=Source%20Sans%20Pro&headerFont=Merriweather

[KyleAMathews]

Inspired by proselint.com

http://kyleamathews.github.io/typography.js/#/?headerFontFamily=Lato&baseFontSize=20px&headerWeight=900&googleBodyFont=Merriweather&googleFonts%5B%5D%5Bname%5D=Lato&googleFonts%5B%5D%5Bstyles%5D%5B%5D=100&googleFonts%5B%5D%5Bstyles%5D%5B%5D=400&googleFonts%5B%5D%5Bstyles%5D%5B%5D=700&googleFonts%5B%5D%5Bstyles%5D%5B%5D=900&onfiguration%3FheaderFontFamily=Neuton&baseLineHeight=36px&bodyFont=Merriweather&modularScales%5B%5D=perfect%20fifth&googleHeaderFont=Lato&bodyFontFamily=Merriweather&bodyWeight=300&headerFont=Lato

[KyleAMathews]

These should go into their own NPM module actually.

[KyleAMathews]

From http://haxe.org/blog/

Source Sans Pro headers and Open Sans body.

http://kyleamathews.github.io/typography.js/#/?headerFontFamily=Source%20Sans%20Pro&baseFontSize=16px&headerWeight=600&googleBodyFont=Open%20Sans&googleFonts%5B%5D%5Bname%5D=Lato&googleFonts%5B%5D%5Bstyles%5D%5B%5D=100&googleFonts%5B%5D%5Bstyles%5D%5B%5D=400&googleFonts%5B%5D%5Bstyles%5D%5B%5D=600&googleFonts%5B%5D%5Bstyles%5D%5B%5D=900&baseLineHeight=24px&bodyFont=Open%20Sans&modularScales%5B%5D=major%20third&googleHeaderFont=Source%20Sans%20Pro&bodyFontFamily=Open%20Sans&headerFont=Source%20Sans%20Pro

[KyleAMathews]

Inspired by Mixpanel's blog http://blog.mixpanel.com/2011/11/16/tapping-into-advanced-data-types/

Ek Mukta headers (instead of their proprietary Brandon Grotesque) and Lato body

http://kyleamathews.github.io/typography.js/#/?headerFontFamily=Ek%20Mukta&baseFontSize=18px&bodyGray=30&headerWeight=700&googleBodyFont=Lato&googleFonts%5B%5D%5Bname%5D=Lato&googleFonts%5B%5D%5Bstyles%5D%5B%5D=100&googleFonts%5B%5D%5Bstyles%5D%5B%5D=400&googleFonts%5B%5D%5Bstyles%5D%5B%5D=600&googleFonts%5B%5D%5Bstyles%5D%5B%5D=900&baseLineHeight=32px&headerGray=30&bodyFont=Lato&modularScales%5B%5D=perfect%20fifth&googleHeaderFont=Ek%20Mukta&bodyFontFamily=Lato&headerFont=Source%20Sans%20Pro