{"id":4838,"date":"2018-10-31T14:46:42","date_gmt":"2018-10-31T13:46:42","guid":{"rendered":"https:\/\/www.zeichenschatz.net\/?page_id=4838"},"modified":"2022-07-18T15:09:45","modified_gmt":"2022-07-18T13:09:45","slug":"webtypo-ws","status":"publish","type":"page","link":"https:\/\/zeichenschatz.net\/en\/webtypo-ws\/","title":{"rendered":"Web Typography Workshop Resources"},"content":{"rendered":"<p>&nbsp;<\/p>\n<p><a class=\"btn btn--shadow\" href=\"https:\/\/codepen.io\/collection\/XoWkyp\/\">CodePen Templates<\/a>\u00a0 <a class=\"btn btn--shadow\" href=\"https:\/\/codepen.io\/collection\/nvgyVR\/\">CodePen Examples<\/a><\/p>\n<p>&nbsp;<\/p>\n<h2>Links and Resources<\/h2>\n<h4>Inspiration for good web typography<\/h4>\n<ul>\n<li><a href=\"https:\/\/fontsinuse.com\/in\/2\/formats\/3\/web\">Fonts in Use: Web<\/a> \u2013 typographically interesting websites<\/li>\n<li><a href=\"http:\/\/typewolf.com\/\">Typewolf<\/a> \u2013 Verschiedene Listen und Schriftanalysen von Website<\/li>\n<li><a href=\"http:\/\/hellohappy.org\/beautiful-web-type\/\">Beautiful Web Type<\/a> \u2013 Sch\u00f6ner typografischer Umgang mit Google Fonts, wenn auch schon \u00e4lter und nicht responsive<\/li>\n<\/ul>\n<h4>1. The right typeface<strong><br \/>\n<\/strong><\/h4>\n<ul>\n<li><a href=\"https:\/\/8660.at\/webtypo\/index.html#schriftwahl\">Browser examples for choosing typefaces<\/a><\/li>\n<li><a href=\"https:\/\/8660.at\/schriftwahl-im-webdesign\/\">Schritwahl im Webdesign<\/a> German blog article<\/li>\n<li><a href=\"http:\/\/alistapart.com\/article\/how-we-read\">How We Read<\/a> \u2013 article from alistapart describing reading and why typography has such a great impact<\/li>\n<li><a href=\"http:\/\/www.typografie.info\/3\/artikel.htm\/wissen\/schriftmischung-ist-keine-hexerei-r314\/\">Schriftmischung ist keine Hexerei<\/a> \u2013 Deutsch \u00fcbersetzter Artikel von John Boardley auf Typografie.info<\/li>\n<li><a href=\"https:\/\/8660.at\/css-font-stack-alternative-schriften-im-webdesign-klug-einsetzen\/\">CSS Font Stack \u2013 Alternative Schriften im Webdesign klug einsetzen<\/a><\/li>\n<li><a href=\"https:\/\/8660.at\/websichere-schriften\/\">Websichere Schriften in Zeiten von Responsive Webdesign<\/a><\/li>\n<li><a href=\"http:\/\/typecast.com\/\">Typecast<\/a> \u2013 Testing Fonts in the browser<\/li>\n<\/ul>\n<h4>2. Web typography basics<\/h4>\n<ul>\n<li><a href=\"https:\/\/www.smashingmagazine.com\/2014\/09\/balancing-line-length-font-size-responsive-web-design\/#line-height-and-font-size\">Size Matters: Balancing Line Length And Font Size In Responsive Web Design<\/a><\/li>\n<li><a href=\"https:\/\/8660.at\/webtypo\/index.html#schriftwahl\">Browser Examples of line-height and line-length<\/a><\/li>\n<li><a href=\"https:\/\/8660.at\/webtypo\/index.html#blocksatz\">Browser Examples for justified text<\/a><\/li>\n<li><a href=\"https:\/\/zellwk.com\/blog\/rem-vs-em\/\">REM vs EM \u2013 The Great Debate<\/a> about relative units<\/li>\n<\/ul>\n<h4>3. Advances web typography<strong><br \/>\n<\/strong><\/h4>\n<ul>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/l\/list-style\/\">list-style CSS-Tricks<\/a> \u2013 how to show different list-styles<\/li>\n<li><a href=\"https:\/\/8660.at\/webtypo\/index.html#faux-fonts\">Browser-Examples showing Faux-Fonts<\/a><\/li>\n<li><a href=\"https:\/\/www.smashingmagazine.com\/2016\/05\/fluid-typography\/\">Responsive And Fluid Typography With vh And vw Units<\/a><\/li>\n<\/ul>\n<h4>4. Variable Fonts<strong><br \/>\n<\/strong><\/h4>\n<ul>\n<li><a href=\"https:\/\/zeichenschatz.net\/en\/typografie\/how-to-start-with-variable-fonts-on-the-web.html\/\">How to start with variable fonts on the web<\/a> by me<\/li>\n<li><a href=\"https:\/\/zeichenschatz.net\/en\/typografie\/implementing-a-variable-font-with-fallback-web-fonts.html\/\">Implementing a variable font with fallback web fonts<\/a> by me<\/li>\n<li><a href=\"http:\/\/v-fonts.com\/\" target=\"_blank\" rel=\"noopener\">v-fonts.com<\/a> New releases of variable fonts<\/li>\n<li><a href=\"http:\/\/play.typedetail.com\" target=\"_blank\" rel=\"noopener\">Font Playground at Type Detail<\/a> \u2013 Test and try out variable fonts and export the code to CodePen<\/li>\n<li>Video: <a href=\"https:\/\/vimeo.com\/287977214\">Talk about Variable Web Typography<\/a> by me<\/li>\n<li><a href=\"http:\/\/clagnut.com\/blog\/2389\/\" target=\"_blank\" rel=\"noopener\">Getting started with variable fonts<\/a> by Richard Rutter<\/li>\n<li><a href=\"http:\/\/v-fonts.com\/\" target=\"_blank\" rel=\"noopener\">Use variable fonts in the real world<\/a> by Richard Rutter<\/li>\n<\/ul>\n<h2>Downloads<\/h2>\n<ul>\n<li><a href=\"https:\/\/zeichenschatz.net\/wp-content\/uploads\/2018\/11\/Web-Typografie-Workshop-2018-btconf-1.pdf\">Presentation (pdf, <span class=\"oldstyle-nums\">44<\/span> MB)<\/a><\/li>\n<li><a href=\"https:\/\/zeichenschatz.net\/wp-content\/uploads\/2018\/11\/Web-Typografie-Workshop-2018-btconf-vertical-rhythem-1.pdf\">Bonus: Vertical Rhythm (pdf)<\/a><\/li>\n<li><a href=\"https:\/\/zeichenschatz.net\/wp-content\/uploads\/2018\/10\/Google-Fonts-Selection-1.pdf\" download=\"\">Google Fonts Selection (pdf)<\/a><\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>&nbsp; CodePen Templates\u00a0 CodePen Examples &nbsp; Links and Resources Inspiration for good web typography Fonts in Use: Web \u2013 typographically interesting websites Typewolf \u2013 Verschiedene Listen und Schriftanalysen von Website Beautiful Web Type \u2013 Sch\u00f6ner typografischer Umgang mit Google Fonts, wenn auch schon \u00e4lter und nicht responsive 1. The right typeface Browser examples for choosing [&hellip;]<\/p>","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-4838","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/zeichenschatz.net\/en\/wp-json\/wp\/v2\/pages\/4838","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zeichenschatz.net\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/zeichenschatz.net\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/zeichenschatz.net\/en\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/zeichenschatz.net\/en\/wp-json\/wp\/v2\/comments?post=4838"}],"version-history":[{"count":1,"href":"https:\/\/zeichenschatz.net\/en\/wp-json\/wp\/v2\/pages\/4838\/revisions"}],"predecessor-version":[{"id":6777,"href":"https:\/\/zeichenschatz.net\/en\/wp-json\/wp\/v2\/pages\/4838\/revisions\/6777"}],"wp:attachment":[{"href":"https:\/\/zeichenschatz.net\/en\/wp-json\/wp\/v2\/media?parent=4838"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}