Wes Bos & Scott Tolinski - Full Stack JavaScrip...

Zpravodajství

Technologické zprávy

Technika

782: The Developer’s Guide To Fonts with Stephen Nixon

Syntax - Tasty Web Development Treats

Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.

Scott and CJ are joined by Stephen Nixon of ArrowType to delve into the world of fonts and type for developers. They explore the intricacies of font creation, the utility of variable fonts, and offer tips for making visually appealing typography on the web. <h3 class="code-line" data-line-start="2" data-line-end="3"><a id= "Show_Notes_2"></a>Show Notes</h3> <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <a href="#t=00:00">00:00</a> Welcome to Syntax!</li> <li class="has-line-data" data-line-start="5" data-line-end="8"> <a href="#t=00:57">00:57</a> Who is Stephen Nixon? <ul> <li class="has-line-data" data-line-start="6" data-line-end="7"> <a href="https://processtypefoundry.com/">Process Type Foundry</a>.</li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <a href="https://www.marksimonson.com/fonts/view/proxima-nova">Mark Simonson Proxima Nova</a>.</li> </ul> </li> <li class="has-line-data" data-line-start="8" data-line-end="10"> <a href="#t=05:42">05:42</a> What is a type foundry exactly? <ul> <li class="has-line-data" data-line-start="9" data-line-end="10"> <a href="https://www.arrowtype.com/">ArrowType</a>.</li> </ul> </li> <li class="has-line-data" data-line-start="10" data-line-end="31"> <a href="#t=09:09">09:09</a> Font / type making. <ul> <li class="has-line-data" data-line-start="11" data-line-end="14"> <a href="#t=09:15">09:15</a> How do you make a font? <ul> <li class="has-line-data" data-line-start="12" data-line-end="13"> <a href="https://robofont.com/">RoboFont</a>.</li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <a href="https://glyphsapp.com/">Glyphs</a>.</li> </ul> </li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <a href="#t=11:58">11:58</a> Fonts vs typefaces.</li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <a href="#t=13:02">13:02</a> How many fonts have you made?</li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <a href="#t=14:17">14:17</a> What are variable fonts and how can web developers utilize them?</li> <li class="has-line-data" data-line-start="17" data-line-end="20"> <a href="#t=19:22">19:22</a> Animating fonts. <ul> <li class="has-line-data" data-line-start="18" data-line-end="19"> <a href="https://variablefonts.io/">Variable Fonts</a>.</li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <a href="https://www.recursive.design/">Recursive</a>.</li> </ul> </li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <a href="#t=20:28">20:28</a> Do you code your demo sites yourself?</li> <li class="has-line-data" data-line-start="21" data-line-end="25"> <a href="#t=21:50">21:50</a> Are variable fonts more complex to design (and develop). <ul> <li class="has-line-data" data-line-start="22" data-line-end="23"> <a href="https://fonts.adobe.com/designers/matthew-carter">Matthew Carter Adobe Fonts</a>, <a href= "https://en.wikipedia.org/wiki/Matthew_Carter">Matthew Carter Wiki</a>.</li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <a href= "https://typedrawers.com/discussion/3292/working-with-multiple-masters"> Multiple Masters Variable Fonts</a>.</li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <a href="https://www.simongarfield.com/books/just-my-type/">Just My Type</a>.</li> </ul> </li> <li class="has-line-data" data-line-start="25" data-line-end="29"> <a href="#t=27:03">27:03</a> Hand painted fonts. <ul> <li class="has-line-data" data-line-start="26" data-line-end="27"> <a href="https://housefonts.com/">House industries</a>.</li> <li class="has-line-data" data-line-start="27" data-line-end="28"> <a href="https://goldensignco.tumblr.com/everythingelse">Golden Sign Co</a>.</li> <li class="has-line-data" data-line-start="28" data-line-end="29"> <a href="https://genramirez.com/">Gen Ramirez</a>.</li> </ul> </li> <li class="has-line-data" data-line-start="29" data-line-end="30"> <a href="#t=29:39">29:39</a> Creating a monospace font.</li> <li class="has-line-data" data-line-start="30" data-line-end="31"> <a href="#t=32:19">32:19</a> Creating fonts with dyslexia accessibility in mind.</li> </ul> </li> <li class="has-line-data" data-line-start="31" data-line-end="39"> <a href="#t=37:58">37:58</a> Typography for the web. <ul> <li class="has-line-data" data-line-start="32" data-line-end="33"> <a href="#t=38:29">38:29</a> What are some 80/20 rules developers can employ to make more visually appealing typography?</li> <li class="has-line-data" data-line-start="33" data-line-end="35"> <a href="#t=40:58">40:58</a> Type scale calculations. <ul> <li class="has-line-data" data-line-start="34" data-line-end="35"> <a href="https://fluid-type.tolin.ski/">Scott’s Fluid Type Calculator</a>.</li> </ul> </li> <li class="has-line-data" data-line-start="35" data-line-end="36"> <a href="#t=45:42">45:42</a> What are your biggest web type pet peeves.</li> <li class="has-line-data" data-line-start="36" data-line-end="39"> <a href="#t=48:46">48:46</a> Do you have any favorite type tools? <ul> <li class="has-line-data" data-line-start="37" data-line-end="38"> <a href="https://wakamaifondue.com/">Wakamifondue</a>.</li> <li class="has-line-data" data-line-start="38" data-line-end="39"> <a href= "https://pixelambacht.nl/2019/fixing-variable-font-inheritance/">Fixing Variable Font Inheritance</a>.</li> </ul> </li> </ul> </li> <li class="has-line-data" data-line-start="39" data-line-end="50"> <a href="#t=50:34">50:34</a> Supper Club Questions. <ul> <li class="has-line-data" data-line-start="40" data-line-end="42"> <a href="#t=50:44">50:44</a> How do you feel about ligatures in coding fonts? <ul> <li class="has-line-data" data-line-start="41" data-line-end="42"> <a href= "https://practicaltypography.com/ligatures-in-programming-fonts-hell-no.html"> Ligatures In Programming Fonts Hell No</a>.</li> </ul> </li> <li class="has-line-data" data-line-start="42" data-line-end="45"> <a href="#t=55:11">55:11</a> What font do you use? <ul> <li class="has-line-data" data-line-start="43" data-line-end="44"> <a href="https://blog.arrowtype.com/name-sans-v05/">Name Sans v05</a>.</li> <li class="has-line-data" data-line-start="44" data-line-end="45"> <a href= "https://store.arrowtype.com/fonts/name-mono">Name-Mono</a>.</li> </ul> </li> <li class="has-line-data" data-line-start="45" data-line-end="50"> <a href="#t=56:43">56:43</a> What is your favorite font of all time? <ul> <li class="has-line-data" data-line-start="46" data-line-end="47"> <a href="https://www.typotheque.com/">Typotheque</a>.</li> </ul> <ul> <li class="has-line-data" data-line-start="47" data-line-end="48"> <a href="https://klim.co.nz/collections/soehne/">Soehne</a>.</li> <li class="has-line-data" data-line-start="48" data-line-end="49"> <a href="https://www.grillitype.com/typefaces">Grillitype Typefaces</a>.</li> <li class="has-line-data" data-line-start="49" data-line-end="50"> <a href="https://ohnotype.co/">Phnotype</a>.</li> </ul> </li> </ul> </li> <li class="has-line-data" data-line-start="50" data-line-end="52"> <a href="#t=58:49">58:49</a> Sick Picks + Shameless Plugs.</li> </ul> <h3 class="code-line" data-line-start="52" data-line-end="53"> <a id="Sick_Picks_52"></a>Sick Picks</h3> <ul> <li class="has-line-data" data-line-start="54" data-line-end="56"> Stephen: <a href= "https://en.wikipedia.org/wiki/Children_of_Time_(novel)">Children of Time</a>, <a href= "https://www.amazon.com/York-Times-Cooking-No-Recipe-Recipes/dp/1984858475"> No-Recipe Recipes</a>.</li> </ul> <h3 class="code-line" data-line-start="56" data-line-end="57"> <a id="Shameless_Plugs_56"></a>Shameless Plugs</h3> <ul> <li class="has-line-data" data-line-start="58" data-line-end="60"> Stephen: <a href="https://www.arrowtype.com/">ArrowType</a>, <a href="https://www.youtube.com/shorts/2o-XTyB_8uw">Skewing Fonts</a>.</li> </ul> <h3 class="code-line" data-line-start="60" data-line-end="61"> <a id="Hit_us_up_on_Socials_60"></a>Hit us up on Socials!</h3> Syntax: <a href="https://twitter.com/syntaxfm">X</a> <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> <a href="https://www.threads.net/@syntax_fm">Threads</a> Wes: <a href="https://twitter.com/wesbos">X</a> <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott:<a href="https://twitter.com/stolinski">X</a> <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: <a href="https://twitter.com/randyrektor">X</a> <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a>

Scott and CJ are joined by Stephen Nixon of ArrowType to delve into the world of fonts and type for developers. They explore the intricacies of font creation, the utility of variable fonts, and offer tips for making visually appealing typography on the web.
 Show Notes  00:00 Welcome to Syntax!
 00:57 Who is Stephen Nixon?  Process Type Foundry.
 Mark Simonson Proxima Nova.

 05:42 What is a type foundry exactly?  ArrowType.

 09:09 Font / type making. 09:15 How do you make a font?  RoboFont.
 Glyphs.

 11:58 Fonts vs typefaces.
 13:02 How many fonts have you made?
 14:17 What are variable fonts and how can web developers utilize them?
 19:22 Animating fonts. Variable Fonts.
 Recursive.

 20:28 Do you code your demo sites yourself?
 21:50 Are variable fonts more complex to design (and develop). Matthew Carter Adobe Fonts, Matthew Carter Wiki.
  Multiple Masters Variable Fonts.
 Just My Type.

 27:03 Hand painted fonts. House industries.
 Golden Sign Co.
 Gen Ramirez.

 29:39 Creating a monospace font.
 32:19 Creating fonts with dyslexia accessibility in mind.

 37:58 Typography for the web. 38:29 What are some 80/20 rules developers can employ to make more visually appealing typography?
 40:58 Type scale calculations. Scott’s Fluid Type Calculator.

 45:42 What are your biggest web type pet peeves.
 48:46 Do you have any favorite type tools?  Wakamifondue.
 Fixing Variable Font Inheritance.

 50:34 Supper Club Questions. 50:44 How do you feel about ligatures in coding fonts?  Ligatures In Programming Fonts Hell No.

 55:11 What font do you use?  Name Sans v05.
 Name-Mono.

 56:43 What is your favorite font of all time?  Typotheque.
  Soehne.
 Grillitype Typefaces.
 Phnotype.

 58:49 Sick Picks + Shameless Plugs.
  Sick Picks  Stephen: Children of Time, No-Recipe Recipes.
  Shameless Plugs  Stephen: ArrowType, Skewing Fonts.
  Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
 Wes: X Instagram Tiktok LinkedIn Threads
 Scott:X Instagram Tiktok LinkedIn Threads
 Randy: X Instagram YouTube Threads

Aplikace Youradio Talk

782: The Developer’s Guide To Fonts with Stephen Nixon

Poslechněte si podcast