100 day project
HTML CSS JavaScript
Latest commit 1ee7f93 Mar 16, 2016 wenzhang add mobile styles
Permalink
Failed to load latest commit information.
css add mobile styles Mar 16, 2016
fonts add moriston Oct 21, 2015
i fix missing image issue Oct 22, 2015
js quick fix js Jun 4, 2015
resources add mobile styles Mar 16, 2016
template add mobile styles Mar 16, 2016
.gitignore git ignore May 18, 2015
CNAME cname May 13, 2015
README.md hot fix Oct 20, 2015
acumin.html add mobile styles Mar 16, 2016
alegreya.html add mobile styles Mar 16, 2016
bookerly.html add mobile styles Mar 16, 2016
bookmania.html add mobile styles Mar 16, 2016
caslon.html add mobile styles Mar 16, 2016
chronicle.html add mobile styles Mar 16, 2016
domine.html add mobile styles Mar 16, 2016
eb-garamond.html add mobile styles Mar 16, 2016
favicon.png favicons Jun 4, 2015
faviconb.png favicons Jun 4, 2015
favicony.png favicon Jun 5, 2015
freight-display-pro.html add mobile styles Mar 16, 2016
georgia.html add mobile styles Mar 16, 2016
index.html add mobile styles Mar 16, 2016
jaf-lapture.html add mobile styles Mar 16, 2016
libre-baskerville.html add mobile styles Mar 16, 2016
lora.html add mobile styles Mar 16, 2016
mercury.html add mobile styles Mar 16, 2016
merriweather.html add mobile styles Mar 16, 2016
minionpro.html add mobile styles Mar 16, 2016
moriston.html add mobile styles Mar 16, 2016
neueswift.html add mobile styles Mar 16, 2016
obsidian.html add mobile styles Mar 16, 2016
oldstandard.html add mobile styles Mar 16, 2016
open-dyslexic.html add mobile styles Mar 16, 2016
quarto.html add mobile styles Mar 16, 2016
san-francisco-display.html add mobile styles Mar 16, 2016
san-francisco.html add mobile styles Mar 16, 2016
sentinel.html add mobile styles Mar 16, 2016
surveyor.html add mobile styles Mar 16, 2016
twine.html add mobile styles Mar 16, 2016
whitney.html add mobile styles Mar 16, 2016

README.md

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.

Progress

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, 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!)

Contact