https://kennethormandy.com/component---src-pages-speaking-2017-07-13-md-86a332747b426e0baaaf.js

1"use strict";(self.webpackChunkkennethormandy_com=self.webpackChunkkennethormandy_com||[]).push([[875],{49330:function(e,a,t){t.r(a),t.d(a,{_frontmatter:function(){return i},default:function(){return l}});var n=t(63366),r=(t(67294),t(64983)),m=t(96747),s=["components"],i={},o={_frontmatter:i},p=m.Z;function l(e){var a=e.components,t=(0,n.Z)(e,s);return(0,r.mdx)(p,Object.assign({},o,t,{components:a,mdxType:"MDXLayout"}),(0,r.mdx)("h1",{id:"web-type-specimens-are-web-type-specimens-talkresources"},"Web type specimens are web type specimens talk",(0,r.mdx)("span",{parentName:"h1",className:"nbsp"}," "),"resources"),(0,r.mdx)("p",null,"Resources for attendees of my talk presented by the ",(0,r.mdx)("a",{parentName:"p",href:"https://twitter.com/gdcabnorth"},"GDC AB North")," at Roots on Whyte."),(0,r.mdx)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"825px"}},"\n      ",(0,r.mdx)("span",{parentName:"span",className:"gatsby-resp-image-background-image",style:{paddingBottom:"75.24271844660194%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAPABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAABAAF/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAL/2gAMAwEAAhADEAAAASw0RabOj//EABoQAAICAwAAAAAAAAAAAAAAAAECABEQEiH/2gAIAQEAAQUCLrYYXsuE5Kn/xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAVEQEBAAAAAAAAAAAAAAAAAAAAEf/aAAgBAgEBPwGI/8QAGBAAAwEBAAAAAAAAAAAAAAAAAAEQETH/2gAIAQEABj8CWCOzZ//EABsQAAIDAAMAAAAAAAAAAAAAAAABESExQWGh/9oACAEBAAE/IdWohMYONBq+xXtZJcen/9oADAMBAAIAAwAAABDk7//EABcRAAMBAAAAAAAAAAAAAAAAAAEQESH/2gAIAQMBAT8QBuRf/8QAGBEAAgMAAAAAAAAAAAAAAAAAABEBIVH/2gAIAQIBAT8QSLYmn//EABsQAQEBAQADAQAAAAAAAAAAAAERIQAxYaHx/9oACAEBAAE/EA6A20Mr95ydNoF/e1jGaMJr1hFE/ebSqGb499U+13n/2Q==')",backgroundSize:"cover",display:"block"}}),"\n  ",(0,r.mdx)("img",{parentName:"span",className:"gatsby-resp-image-image",alt:"A photo of the talk at Roots on Whyte",title:"A photo of the talk at Roots on Whyte",src:"/static/6a9cc91dbbe90a046c1c78774a04c0d0/0ea46/speaking-gdcabnorth-1.jpg",srcSet:["/static/6a9cc91dbbe90a046c1c78774a04c0d0/95d6f/speaking-gdcabnorth-1.jpg 206w","/static/6a9cc91dbbe90a046c1c78774a04c0d0/c8516/speaking-gdcabnorth-1.jpg 413w","/static/6a9cc91dbbe90a046c1c78774a04c0d0/0ea46/speaking-gdcabnorth-1.jpg 825w","/static/6a9cc91dbbe90a046c1c78774a04c0d0/47311/speaking-gdcabnorth-1.jpg 1080w"],sizes:"(max-width: 825px) 100vw, 825px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy",decoding:"async"}),"\n    "),(0,r.mdx)("h2",{id:"the-type-specimensites"},"The type specimen",(0,r.mdx)("span",{parentName:"h2",className:"nbsp"}," "),"sites"),(0,r.mdx)("ul",null,(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("span",{parentName:"li",className:"nbsp"}," "),(0,r.mdx)("a",{parentName:"li",href:"http://moriston.losttype.com"},"moriston.losttype.com")),(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("span",{parentName:"li",className:"nbsp"}," "),(0,r.mdx)("a",{parentName:"li",href:"http://1403.slantedhall.com"},"1403.slantedhall.com")),(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("span",{parentName:"li",className:"nbsp"}," "),(0,r.mdx)("a",{parentName:"li",href:"http://escafina.losttype.com"},"escafina.losttype.com")),(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("span",{parentName:"li",className:"nbsp"}," "),(0,r.mdx)("a",{parentName:"li",href:"http://tofino.losttype.com"},"tofino.losttype.com")),(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("span",{parentName:"li",className:"nbsp"}," "),(0,r.mdx)("a",{parentName:"li",href:"http://boomville.losttype.com"},"boomville.losttype.com")),(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("span",{parentName:"li",className:"nbsp"}," "),(0,r.mdx)("a",{parentName:"li",href:"http://ddc-hardware.losttype.com"},"ddc-hardware.losttype.com")),(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("span",{parentName:"li",className:"nbsp"}," "),(0,r.mdx)("a",{parentName:"li",href:"https://googlefonts.github.io/japanese"},"googlefonts.github.io/japanese")),(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("a",{parentName:"li",href:"/portfolio/ddc-hardware-type-specimen-site/"},"DDC Hardware type specimen site",(0,r.mdx)("span",{parentName:"a",className:"nbsp"}," "),"article")),(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("a",{parentName:"li",href:"/portfolio/1403-vintage-mono-pro-type-specimen-site/"},"1403 Vintage Mono Pro type specimen site",(0,r.mdx)("span",{parentName:"a",className:"nbsp"}," "),"article"))),(0,r.mdx)("h2",{id:"variation-in-web-type-and-web-fontloading"},"Variation in web type and web font",(0,r.mdx)("span",{parentName:"h2",className:"nbsp"}," "),"loading"),(0,r.mdx)("ul",null,(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("a",{parentName:"li",href:"http://louderthanten.com/coax/design-machines"},"Design Machines"),", I’d highly reccomend this article by Travis",(0,r.mdx)("span",{parentName:"li",className:"nbsp"}," "),"Gertz"),(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("a",{parentName:"li",href:"/journal/efficient-web-type-circa-1556"},"Efficient Web Type, c. 1556"),", My talk on WOFF2 around the time WOFF2 came out, includes most of the code samples that we looked at for web font",(0,r.mdx)("span",{parentName:"li",className:"nbsp"}," "),"loading"),(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("a",{parentName:"li",href:"www.zachleat.com/web/comprehe

1nsive-webfonts"},"…Font Loading Strategies"),", from Zach Leatherman"),(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("a",{parentName:"li",href:"https://abookapart.com/products/webfont-handbook?utm_source=kennethormandy.com"},"Webfont Handbook")," Bram Stein’s book is coming out this summer and will be an excellent resource on this. In the meantime, you should follow ",(0,r.mdx)("a",{parentName:"li",href:"https://twitter.com/bram_stein/"},"Bram")," and ",(0,r.mdx)("a",{parentName:"li",href:"https://twitter.com/kupfers"},"Indra")," on Twitter")),(0,r.mdx)("h2",{id:"open-source"},"Open source"),(0,r.mdx)("p",null,"Some of the typographic open source projects I worked on that you are free to use in your own",(0,r.mdx)("span",{parentName:"p",className:"nbsp"}," "),"projects:"),(0,r.mdx)("ul",null,(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("a",{parentName:"li",href:"https://github.com/kennethormandy/font-feature-fibbing"},"Font Feature Fibbing"),", for showing a fallback for OpenType features in Safari (admittedly you probably don’t need to use this anymore, but it was useful a few years",(0,r.mdx)("span",{parentName:"li",className:"nbsp"}," "),"ago)."),(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("a",{parentName:"li",href:"http://utility-opentype.kennethormandy.com"},"Utility OpenType"),", all the code samples and documentation for using the OpenType features on the web, including some further reading, are",(0,r.mdx)("span",{parentName:"li",className:"nbsp"}," "),"here."),(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("a",{parentName:"li",href:"http://font-to-width.kennethormandy.com"},"Font-To-Width"),", determine what width of a type family you can use based on the",(0,r.mdx)("span",{parentName:"li",className:"nbsp"}," "),"content."),(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("a",{parentName:"li",href:"https://github.com/ekalinin/typogr.js/"},"Typogr.js"),", by ",(0,r.mdx)("a",{parentName:"li",href:"https://github.com/ekalinin"},"@ekalinin")," with some small contributions by me. There are versions of this (usually called Typogrify) in PHP for WordPress, in Ruby, Django, and many other programming",(0,r.mdx)("span",{parentName:"li",className:"nbsp"}," "),"languages.")),(0,r.mdx)("h2",{id:"various-other-references-in-thepresentation"},"Various other references in the",(0,r.mdx)("span",{parentName:"h2",className:"nbsp"}," "),"presentation"),(0,r.mdx)("ul",null,(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("a",{parentName:"li",href:"http://practicaltypography.com/"},"Butterick’s Practical Typography"),", a great typography resource from Matthew",(0,r.mdx)("span",{parentName:"li",className:"nbsp"}," "),"Butterick"),(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("a",{parentName:"li",href:"http://caniuse.com"},"Can I Use"),","),(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("a",{parentName:"li",href:"http://stateofwebtype.com"},"State of Web Type"),", the “Can I Use” for web",(0,r.mdx)("span",{parentName:"li",className:"nbsp"}," "),"typography"),(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("a",{parentName:"li",href:"/portfolio/secret-code-emoji-for-sad-mag/"},"The emoji set I worked on for SAD",(0,r.mdx)("span",{parentName:"a",className:"nbsp"}," "),"Mag")),(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("a",{parentName:"li",href:"http://www.alphabettes.org/design-of-a-handwritten-devanagari-typeface/"},"Design of a Handwritten Devanagari Typeface"),", Kimya Gandhi’s sketch",(0,r.mdx)("span",{parentName:"li",className:"nbsp"}," "),"typeface"),(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("a",{parentName:"li",href:"www.p01.org/defender_of_the_favicon/"},"Defender of the",(0,r.mdx)("span",{parentName:"a",className:"nbsp"}," "),"Favicon")),(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("a",{parentName:"li",href:"http://httparchive.org/trends.php?s=All&minlabel=May+1+2012&maxlabel=May+1+2014#bytesFont&reqFont"},"Web font usage trend",(0,r.mdx)("span",{parentName:"a",className:"nbsp"}," "),"data")),(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("a",{parentName:"li",href:"https://www.fontsquirrel.com/tools/webfont-generator"},"Font Squirrel generator"),", if you use this, make sure to use the advanced options and choose what settings you actually",(0,r.mdx)("span",{parentName:"li",className:"nbsp"}," "),"want"),(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("a",{parentName:"li",href:"http://slightly-tracked-script.tumblr.com"},"Slightly Tracked Script",(0,r.mdx)("span",{parentName:"a",className:"nbsp"}," "),"blog"))),(0,r.mdx)("h2",{id:"other-things-people-asked-about-in-theqa"},"Other things people asked about in the",(0,r.mdx)("span",{parentName:"h2",className:"nbsp"}," "),"Q&A"),(0,r.mdx)("ul",null,(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("a",{parentName:"li",href:"https://www.prototypo.io/"},"Prototypo.io"),", parametric type design",(0,r.mdx)("span",{parentName:"li",className:"nbsp"}," "),"tool"),(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("a",{parentName:"li",href:"https://medium.com/@tiro/https-medium-com-tiro-introducing-opentype-variable-fonts-12ba6cd2369"},"Introducing OpenType Variable",(0,r.mdx)("span",{parentName:"a",className:"nbsp"}," "),"Fonts")),(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("a",{parentName:"li",href:"http://www.axis-praxis.org/"},"Axis Praxis"),", give Variable Fonts a try in recent",(0,r.mdx)("span",{parentName:"li",className:"nbsp"}," "),"browsers"),(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("a",{parentName:"li",href:"https://developer.mozilla.org/en-US/"},"MDN"),", documentation for Open Web technologies including HTML, CSS, and",(0,r.mdx)("span",{parentName:"li",className:"nbsp"}," "),"JavaScript")),(0,r.mdx)("p",null,"Thanks for attending the talk and being such a great audience! Hope you enjoyed",(0,r.mdx)("span",{parentName:"p",className:"nbsp"}," "),"it."),(0,r.mdx)("p",null,"You can ",(0,r.mdx)("a",{parentName:"p",href:"http://twitter.com/kennethormandy"},"follow me on Twitter here")," for regular web typography posts. A couple of times a year, I also send out new typography articles and reading lists like this via email, if you’d like you can subscribe",(0,r.mdx)("span",{parentName:"p",className:"nbsp"}," "),"below:"))}l.isMDXComponent=!0},17151:function(e,a,t){t.d(a,{Z:function(){return o}});var n=t(67294),r=t(73894),m=t(6125),s=function(e){if(!e||!e.image)return null;var a=(0,m.d)(e.image);return a?n.createElement("figure",{class:"mt3"},n.createElement(m.G,{image:a,alt:e.alt})):null},i=function(e){return n.createElement(r.h4,null,e.settings&&!1===e.settings.showFeaturedImage?null:n.createElement(s,{alt:e.featuredImageAlt,image:e.featuredImage}),e.settings&&!1===e.settings.showTitle&&e.title?null:n.createElement(r.H1,null,

1n.createElement(r.pS,{text:e.title})))};i.defaultProps={featuredImageAlt:"",settings:{showTitle:!0,showFeaturedImage:!0}};var o=i},96747:function(e,a,t){var n=t(67294),r=t(82418),m=t(39926),s=t(17151);a.Z=function(e){if(void 0===e.children||!e.children||void 0===e.pageContext)return null;var a=e.pageContext.frontmatter,t=e.children;return n.createElement("article",{className:"Article"},n.createElement(r.Z,{title:a.title,description:a.description||a.subtitle||null,featuredImage:a.featuredImage,date:a.date}),n.createElement(s.Z,a),n.createElement("div",{className:"px2"},n.createElement(m.Z,null,n.createElement("div",{className:"Article-content"},t))))}}}]);