{"id":13670302,"url":"https://github.com/wentin/typedetail","last_synced_at":"2025-07-11T12:41:28.526Z","repository":{"id":32004757,"uuid":"35575717","full_name":"wentin/typedetail","owner":"wentin","description":"Annotating beautiful details of web fonts","archived":false,"fork":false,"pushed_at":"2024-10-29T17:40:59.000Z","size":14283,"stargazers_count":191,"open_issues_count":5,"forks_count":13,"subscribers_count":15,"default_branch":"gh-pages","last_synced_at":"2025-01-18T05:43:08.877Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://typedetail.com/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wentin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-05-13T21:44:20.000Z","updated_at":"2025-01-01T13:48:13.000Z","dependencies_parsed_at":"2024-11-11T07:31:58.305Z","dependency_job_id":"cddd1358-26e7-4725-b195-85a6c336e42a","html_url":"https://github.com/wentin/typedetail","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wentin%2Ftypedetail","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wentin%2Ftypedetail/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wentin%2Ftypedetail/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wentin%2Ftypedetail/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wentin","download_url":"https://codeload.github.com/wentin/typedetail/tar.gz/refs/heads/gh-pages","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243085976,"owners_count":20234002,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-02T09:00:38.254Z","updated_at":"2025-03-11T17:53:00.952Z","avatar_url":"https://github.com/wentin.png","language":"HTML","funding_links":[],"categories":["HTML"],"sub_categories":[],"readme":"Type Detail\n----------\n\nType 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.\n\n### Progress\n- [Georgia](https://typedetail.com/georgia.html)\n- [EB Garamond](https://typedetail.com/eb-garamond.html)\n- [Freight Display Pro](https://typedetail.com/freight-display-pro.html)\n- [Adobe Caslon Pro](https://typedetail.com/caslon.html)\n- [Lora](https://typedetail.com/lora.html)\n- [San Francisco](https://typedetail.com/san-francisco.html)\n- [San Francisco Display](https://typedetail.com/san-francisco-display.html)\n- [Alegreya](https://typedetail.com/alegreya.html)\n- [Libre Baskerville](https://typedetail.com/libre-baskerville.html)\n- [Obsidian](https://typedetail.com/obsidian.html)\n- [Bookerly](https://typedetail.com/bookerly.html)\n- [Sentinel](https://typedetail.com/sentinel.html)\n\n### Template\nIf you are interested in joining me on this type exploratory trip, you could grab my template and start making annotation of your favorite typefaces.\n\n1.  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);\n2. unzip it, you will find a `template.html` file with supporting folders such as `css` and `js`\n3. make a copy of `template.html` and `css/template.scss` (or template.css if you don't use sass)\n4. Inside `template.html`, I have commented out all the annotation markups from which you can pick and use, there are three kinds of annotations\n    * `div.note`: you can add more class\n        * `.large` and `.medium` change the size of the circle\n        * `.bottom` control the position\n        * `.left` control which side the text should be\n    * `div.line`:  it is used to annotate the stress angle, add inline rotate css to control the angle of the stress angle line\n    * `div.frame`: it is used to annotate typeface's metrics such as x-height, cap height, ascender height, descender height\n        * add `\u003ci\u003e\u003c/i\u003e` to add a line, use inline css to change the position\n        * add class `.bottom` to control the position\n        * add class `.left` to control which side the text should be\n5. inside `template.scss`, there is just two variable for you to change\n    * `$tint`: change the accent color of the page \n    * `$font`:  change it to the typeface you are annotating\n\n6. 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.\n\n####Other Projects by [Wenting Zhang](https://thenetawards.com/vote/talent/wenting-zhang/)\n* Typographic javascript library: [underline.js](https://github.com/wentin/underlineJS)\n  * underline.js is nominated for [Net Awards: Side Project of the Year](https://thenetawards.com/vote/side-project/underline-js/), vote for it!\n* Resume Online builder: [profession.is](https://profession.is/#/)\n* Sketch Plugin: [Sketch States Switch](https://github.com/wentin/sketch-states-switch)\n* Mini Blog CMS hack: [Hack the Hackpad](https://github.com/wentin/Hack-the-Hackpad)\n\n\n### Mentions (thank you!)\n* [The Next Web](https://thenextweb.com/apple/2015/05/25/font-of-all-knowledge/)\n* [Engadget](https://de.engadget.com/2015/05/25/apples-neue-font-san-francisco-unter-der-lupe/)\n* [designtaxi.com](https://designtaxi.com/news/376166/For-Type-Lovers-100-Day-Project-Zooms-In-On-The-Beautiful-Details-Of-Typefaces/)\n* [typekit.com](https://blog.typekit.com/2015/06/05/sites-we-like-type-detail-professional-web-typography/)\n* [yahoo!](https://www.yahoo.com/tech/s/dissecting-ios-9-apple-font-201035637.html?nf=1)\n* [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/)\n\n### Contact\n* Follow [@DesignJokes](https://twitter.com/DesignJokes) on Twitter\n* Read on [Medium](https://medium.com/@wenting_zhang)\n* Email \u003czhangwenting111@gmail.com\u003e\n* Visit [wentin.co](https://wentin.co)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwentin%2Ftypedetail","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwentin%2Ftypedetail","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwentin%2Ftypedetail/lists"}