Want to take your software engineering career to the next level? Join the mailing list for career tips & advice Click here


100 day project

Subscribe to updates I use typedetail

Statistics on typedetail

Number of watchers on Github 169
Number of open issues 5
Average time to close an issue 3 days
Main language HTML
Average time to merge a PR 2 days
Open pull requests 1+
Closed pull requests 1+
Last commit over 2 years ago
Repo Created over 5 years ago
Repo Last Updated over 2 years ago
Size 12.2 MB
Homepage http://typedetail...
Organization / Authorwentin
Page Updated
Do you use typedetail? Leave a review!
View open issues (5)
View typedetail activity
View on github
Book a Mock Interview With Me (Silicon Valley Engineering Leader, 100s of interviews conducted)
Software engineers: It's time to get promoted. Starting NOW! Subscribe to my mailing list and I will equip you with tools, tips and actionable advice to grow in your career.
Evaluating typedetail for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)

Type Detail

Type detail is an ongoing project by Wenting Zhang, inspired by the great discontent's 100 day project and Stephen Coles's great book The Anatomy of Type. 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.



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, here is the folder structure and here is how the template looks in browser;
  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 <i></i> 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 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

Mentions (thank you!)


typedetail open issues Ask a question     (View All Issues)
  • almost 4 years eb garamond missing R in the specimen
  • over 5 years LICENSE
typedetail open pull requests (View All Pulls)
  • Fix HTML syntax on Old Standard page
typedetail list of languages used
Other projects in HTML
Powered by Autocode - Instant Webhooks, Scripts and APIs
Autocode logo wordmark