Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/wentin/typedetail

Annotating beautiful details of web fonts
https://github.com/wentin/typedetail

Last synced: 3 months ago
JSON representation

Annotating beautiful details of web fonts

Awesome Lists containing this project

README 

        
Type Detail

----------



Type detail is an ongoing project by [Wenting Zhang](https://thenetawards.com/vote/talent/wenting-zhang/), inspired by the great discontent's [100 day project](https://thegreatdiscontent.com/100days) and Stephen Coles's great book [The Anatomy of Type](https://typeanatomy.com/). The rule and goal are to annotate a web typeface each day, pointing out the beautiful details of the typefaces that one often takes for granted.



### Progress

- [Georgia](https://typedetail.com/georgia.html)

- [EB Garamond](https://typedetail.com/eb-garamond.html)

- [Freight Display Pro](https://typedetail.com/freight-display-pro.html)

- [Adobe Caslon Pro](https://typedetail.com/caslon.html)

- [Lora](https://typedetail.com/lora.html)

- [San Francisco](https://typedetail.com/san-francisco.html)

- [San Francisco Display](https://typedetail.com/san-francisco-display.html)

- [Alegreya](https://typedetail.com/alegreya.html)

- [Libre Baskerville](https://typedetail.com/libre-baskerville.html)

- [Obsidian](https://typedetail.com/obsidian.html)

- [Bookerly](https://typedetail.com/bookerly.html)

- [Sentinel](https://typedetail.com/sentinel.html)



### Template

If you are interested in joining me on this type exploratory trip, you could grab my template and start making annotation of your favorite typefaces.



1.  dowanload the [template zip file](https://github.com/wentin/typedetail/raw/gh-pages/template/template.zip), here is the [folder structure](https://github.com/wentin/typedetail/tree/gh-pages/template) and here is how the template looks in [browser](https://typedetail.com/template/template.html);

2. unzip it, you will find a `template.html` file with supporting folders such as `css` and `js`

3. make a copy of `template.html` and `css/template.scss` (or template.css if you don't use sass)

4. Inside `template.html`, I have commented out all the annotation markups from which you can pick and use, there are three kinds of annotations

    * `div.note`: you can add more class

        * `.large` and `.medium` change the size of the circle

        * `.bottom` control the position

        * `.left` control which side the text should be

    * `div.line`:  it is used to annotate the stress angle, add inline rotate css to control the angle of the stress angle line

    * `div.frame`: it is used to annotate typeface's metrics such as x-height, cap height, ascender height, descender height

        * add `` to add a line, use inline css to change the position

        * add class `.bottom` to control the position

        * add class `.left` to control which side the text should be

5. inside `template.scss`, there is just two variable for you to change

    * `$tint`: change the accent color of the page 

    * `$font`:  change it to the typeface you are annotating



6. I have a [pilot checklist](https://hackpad.com/Type-Detail-Checklist-YOFriuaXEkj) for annotating a new typeface, to make sure all the necessary information from the template file are changed to accuracy.



####Other Projects by [Wenting Zhang](https://thenetawards.com/vote/talent/wenting-zhang/)

* Typographic javascript library: [underline.js](https://github.com/wentin/underlineJS)

  * underline.js is nominated for [Net Awards: Side Project of the Year](https://thenetawards.com/vote/side-project/underline-js/), vote for it!

* Resume Online builder: [profession.is](https://profession.is/#/)

* Sketch Plugin: [Sketch States Switch](https://github.com/wentin/sketch-states-switch)

* Mini Blog CMS hack: [Hack the Hackpad](https://github.com/wentin/Hack-the-Hackpad)



### Mentions (thank you!)

* [The Next Web](https://thenextweb.com/apple/2015/05/25/font-of-all-knowledge/)

* [Engadget](https://de.engadget.com/2015/05/25/apples-neue-font-san-francisco-unter-der-lupe/)

* [designtaxi.com](https://designtaxi.com/news/376166/For-Type-Lovers-100-Day-Project-Zooms-In-On-The-Beautiful-Details-Of-Typefaces/)

* [typekit.com](https://blog.typekit.com/2015/06/05/sites-we-like-type-detail-professional-web-typography/)

* [yahoo!](https://www.yahoo.com/tech/s/dissecting-ios-9-apple-font-201035637.html?nf=1)

* [howdesign.com](https://www.howdesign.com/design-creativity/top-10-sites-for-designers/top-10-websites-resources-for-graphic-designers/), [Erik Spiekermann podcast](https://formfunk-podcast.de/interviews/erik-spiekermann) [bgr.com](https://bgr.com/2015/05/25/ios-9-os-x-10-11-san-francisco-font/), [sidebar.io](https://sidebar.io/2015/5/24), [graphics.com](https://www.graphics.com/resource/type-detail), [Form Fifty Five](https://formfiftyfive.com/2015/06/type-detail/#respond),[sanziro.com](https://sanziro.com/2015/05/a-peak-at-apples-san-francisco-font.html), [9to5mac.com](https://9to5mac.com/2015/05/25/apple-typeface-san-francisco/), [iphone ticker](https://www.iphone-ticker.de/san-francisco-alle-hintergruende-zur-neuen-ios-9-schriftart-82024/), [deep apple](https://deepapple.com/news/48147.html), [iphonehacks.com](https://www.iphonehacks.com/2015/05/designer-highlights-the-detail-in-apples-new-san-francisco-font.html), [HD blog](https://apple.hdblog.it/2015/05/25/Un-designer-mostra-perche-Apple-ha-scelto-di-usare-il-nuovo-font-San-Francisco/), [macitynet.it](https://www.macitynet.it/font-san-francisco-designer-spiega-perche-apple-lo-ha-scelto/), [giga.de](https://www.giga.de/apps/ios-9/news/san-francisco-was-an-apples-neuer-schrift-so-gut-ist/), [tudocelular.com](https://www.tudocelular.com/apple/noticias/n55035/Designer-explica-porque-Apple-adotou-a-fonte-San-Francisco.html), [ispazio.net](https://www.ispazio.net/523530/un-designer-spiega-perche-apple-pensa-di-adottare-il-carattere-san-francisco-anche-su-ios-e-os-x), [iculture.nl](https://www.iculture.nl/waarom-san-francisco-lettertype/), [ipadizate.es](https://www.ipadizate.es/2015/05/26/contamos-porque-fuente-san-francisco-apple/), [100shiki.com](https://www.100shiki.com/archives/2015/05/type_detail.html), [mactechnews.de](https://www.mactechnews.de/news/article/Apple-Watch-Warum-Apple-die-neue-Schrift-San-Francisco-verwendet-161456.html), [letemsvetemapplem.eu](https://www.letemsvetemapplem.eu/2015/05/25/designer-popsal-proc-apple-ios-9-os-x-10-11-prejde-nove-pismo-san-francisco/), [macerkopf.de](https://www.macerkopf.de/2015/05/26/ios9-darum-apple-schriftart-san/), [actualidadiphone.com](https://www.actualidadiphone.com/type-detail-nos-explica-por-que-apple-usa-san-francisco-como-tipo-de-letra/), [iphon.fr](https://www.iphon.fr/post/police-san-francisco-821357), [macintelligence.org](https://macintelligence.org/blog/2015/05/27/san-francisco-aiutaci-tu/), [smartworld.it](https://www.smartworld.it/informatica/ecco-perche-apple-ha-scelto-il-font-san-francisco.html), [pixel buddha](https://pixelbuddha.net/digest/pixelbuddha-digest-21), [soydemac.com](https://www.soydemac.com/un-disenador-explica-el-porque-apple-ha-elegido-el-tipo-de-fuente-san-francisco/), [iosxtreme.com](https://www.iosxtreme.com/2015/05/25/tipografia-apple-watch-ios-9/), [makemac.com](https://www.makemac.com/apple-watch-font-detail-review/), [itkeijyoshilog Blog](https://itkeijyoshilog.hatenablog.com/entry/2015/06/22/003329), [noticiasaominuto.com](https://www.noticiasaominuto.com/tech/395683/fonte-do-apple-watch-sera-aplicada-ao-ios-9-e-os-x), [want.nl](https://www.want.nl/waarom-apple-op-het-zelfontwikkelde-lettertype-san-francisco-overstapt/), [maximac.se](https://maximac.se/2015/05/en-narmare-titt-pa-apples-typsnitt-san-francisco/), [bicyclemind.it](https://bicyclemind.it/2015/05/27/dettagli-tipografici/), [macintelligence.org](https://macintelligence.org/blog/2015/05/27/san-francisco-aiutaci-tu/), [geekout.de](https://geekout.de/index_files/San_Francisco_neue_Systemschrift_in_IOS9_und_OSX_10-11.php), [apptestsss.de](https://apptestsss.de/2015/05/25/die-details-von-apples-san-francisco-font/), [designimag.com](https://designimag.com/latest-tools-of-the-week-23rd-may-29th-may/), [creive.me](https://creive.me/archives/5960/)



### Contact

* Follow [@DesignJokes](https://twitter.com/DesignJokes) on Twitter

* Read on [Medium](https://medium.com/@wenting_zhang)

* Email 

* Visit [wentin.co](https://wentin.co)