Web Typography

Take a look at this video, which describes problems of modern web typography and how it is relates with classical book printing mastery.

https://www.youtube.com/watch?v=TGHbkTGVqoU

TODO: list books mentioned in video.

Disclaimer: unfinished post / collection of links / side notes

Reading

TODO: implement 3-column “galaxy-layout” page. See also creating your awesome list, https://deanhume.github.io/typography/

  • http://typographyhandbook.com/
  • http://practicaltypography.com/
  • http://typographica.org/category/typography-books/
  • https://www.typewolf.com/cheatsheet
  • http://smartquotesforsmartpeople.com/
  • https://www.awesomeweb.com/blog/perfecting-web-typography
  • http://alistapart.com/article/more-meaningful-typography
  • http://nicewebtype.com/
  • http://universaltypography.com/demo/
  • http://webtypography.net/toc/
  • https://prowebtype.com/

Themes

  • https://edwardtufte.github.io/tufte-css/
  • http://typespiration.com/
  • http://typeplate.com/
  • https://ello.co/dredmorbius/post/xw7jtbjacgocr3doflytha
  • http://alistapart.com/article/a-simpler-page
  • http://craigmod.com/bibliotype/

Vertical rhythm

  • http://matejlatin.github.io/Gutenberg/
  • http://devinhunt.github.io/typebase.css/
  • http://compass-style.org/reference/compass/typography/vertical_rhythm/
  • http://zellwk.com/blog/web-typography-broken/
  • http://alistapart.com/article/settingtypeontheweb
  • http://www.gridlover.net/try

Font size ratio

  • http://type-scale.com/
  • http://www.pearsonified.com/2011/12/golden-ratio-typography.php
  • https://twitter.com/notwaldorf/status/801138269719171073 FOUT

CSS, standards specific things

  • http://stateofwebtype.com/

Fonts combination

  • http://fontpair.co/
  • https://typ.io/libraries/google
  • http://femmebot.github.io/google-type/
  • http://www.cssfontstack.com/

Automatic typography text correction

Web fonts

  • http://kennethormandy.com/journal/normalize-opentype-css/
  • https://css-tricks.com/fout-foit-foft/
  • https://github.com/michaeltaranto/basekick
  • https://meowni.ca/font-style-matcher/

Letter specific things

Kerning

  • http://kerningjs.com/
  • http://letteringjs.com/

Drop Caps

  • https://www.smashingmagazine.com/2012/04/drop-caps-historical-use-and-current-best-practices/

Underline text

  • https://medium.com/designing-medium/crafting-link-underlines-on-medium-7c03a9274f9

Big text headers

See my post on subject

Vertically centering text

  • http://lea.verou.me/2013/03/easily-center-text-vertically-with-svg/
  • http://howtocenterincss.com/#

Issues

  • https://css-tricks.com/fout-foit-foft/

Books about typography

Color scheme

  • https://coolors.co/app

Fonts

  • https://github.com/adobe-fonts