Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/charliewilco/type-findings

A curated list of posts about web typography
https://github.com/charliewilco/type-findings

Last synced: 29 days ago
JSON representation

A curated list of posts about web typography

Awesome Lists containing this project

README 

        
Type Findings

---



Just a curated list of posts (read: every fucking thing I've had bookmarked) about typography with a focus on screens that I've loved or made me think or challenged me in someway or another. More on the way, I promise.



### Contributing

Uh, please do?



### Required Reading

- ["Web Design is 95% Typography"](http://ia.net/blog/the-web-is-all-about-typography-period/) by Oliver Reichenstein

- ["On Web Typography"](http://alistapart.com/article/on-web-typography) by Jason Santa Maria

- ["Upping Your Type Game"](http://jessicahische.is/talkingtype) by Jessica Hische

- ["Why Typography Matters"](https://medium.com/typography/why-typography-matters-14449aae4609) by Max Brody

- ["UI is visible. Type is visible."](http://markboulton.co.uk/journal/invisibletype) by Mark Boulton



### Finding & Using Type

- ["5 Faces for UI Design"](http://typecast.com/blog/type-on-screen-5-faces-for-ui-design) by Daniel Eden

- ["Superhero Superfamilies"](http://typecast.com/blog/type-on-screen-superhero-superfamilies) by Daniel Eden

- ["Choosing Type and Finding Fonts"](http://www.robbiemanson.com/articles/choosing-type-and-finding-fonts/) by Robbie Mason

- ["The Voices of Type"](http://typecast.com/blog/the-voices-of-type) by Eben Sorkin

- ["Pairing Typefaces"](http://blog.typekit.com/2012/05/23/type-study-pairing-typefaces/) by Mandy Brown

- ["Design By Numbers: Typography"](https://medium.com/@_dte/design-by-numbers-typography-2e5fd2f262e4) by Daniel Eden

- ["There is no excuse for bad typography on the web."](https://medium.com/i-m-h-o/there-is-no-excuse-for-bad-typography-on-the-web-33030766a5bd) by Joshua Eithun

- ["Run Ragged"](http://24ways.org/2013/run-ragged/) by Mark Boulton

- ["Typ.io"](http://www.typ.io/)

- ["7 Alternatives to Popular Web Typefaces for Better Performance"](http://cognition.happycog.com/article/7-alternatives-to-popular-web-typefaces-for-better-performance) by Katie Kovalcin

- ["Selecting Typefaces for Body Text"](http://practice.typekit.com/lesson/selecting-typefaces-for-body-text/) by Tim Brown



### CSS

- ["Responsive Typography | ARWHD"](http://arwhd.co/css/2014/10/08/responsive-typography/) by Charles Peters

- ["Fluid Type"](http://trentwalton.com/2012/06/19/fluid-type/) by Trent Walton

- ["Typesetting your CSS Objects"](http://www.edenspiekermann.com/blog/typesetting-your-css-objects) by Spiros Martzoukos

- ["Aligning type to baseline the right way using SASS"](https://medium.com/@razvanonofrei/aligning-type-to-baseline-the-right-way-using-sass-e258fce47a9b) by Razvan Onofrei

- ["Optimize Legibility"](http://usabilitypost.com/2012/11/06/optimize-legibility/) by Dmitry Fadeyev

- ["Please Stop Fixing Font Smoothing"](http://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/) by Dmitry Fadeyev

- ["Hyphens, Text Rendering, and Font Feature Settings"](http://www.sitepoint.com/cross-browser-web-fonts-part-3/) by Chris Mills

- ["Readable, Fluid Type With Basic CSS Smarts"](http://typecast.com/blog/readable-fluid-type-with-basic-css-smarts) by Val Head

- ["There’s more to the CSS rem unit than font sizing"](http://css-tricks.com/theres-more-to-the-css-rem-unit-than-font-sizing/) by Roman Rudenko

- ["Font Sizing Idea"](http://css-tricks.com/rems-ems/) by Chris Coyier

- ["Minimising Font Downloads"](http://jakearchibald.com/2014/minimising-font-downloads/) by Jake Archibald

- ["Loading webfonts with high performance on responsive websites"](http://bdadam.com/blog/loading-webfonts-with-high-performance.html) by Adam Beres-Deak



### Online Tools



- [Scale & Rhythm](http://lamb.cc/typograph/)

- [Type Set With Me](http://typesetwith.me/)

- [Type Scale](http://type-scale.com/)

- [FFFFallback](http://ffffallback.com/) — A simple tool for bulletproof web typography.

- [Type.css](http://mrmrs.io/type.css/) — A mobile first responsive type scale

- [CSS Font Stack](http://cssfontstack.com/) — A complete collection of web safe CSS font stacks and web font CSS.



### Purely Visually Stimulating

- ["Whitespace"](https://medium.com/designing-medium/whitespace-8b92273ab49e) by Marcin Wichary

- ["Google Web Fonts Typographic Project"](http://femmebot.github.io/google-type/) by Phoebe E



### Blogs



### Books

- [_Butterick’s Practical Typography_](http://practicaltypography.com/) by Matthew Butterick

- [_On Web Typography_](http://www.abookapart.com/products/on-web-typography) by Jason Santa Maria ([excerpt](http://alistapart.com/article/how-we-read))

- [_Advanced Web Typography_](http://advancedwebtypography.com/) by Elliott Jay Stocks (forthcoming)



### Open Source Typefaces



- Open Sans

- Fira Sans

- Fira Mono

- Source Sans Pro

- Source Serif Pro

- Playfair

- Roboto

- Clear Sans