Борда о UX/UI.Design Boardhttps://teletype.in/atom/designboard2026-04-08T20:44:44.978Zdesignboard:best-free-fonts2019-11-01T07:01:09.514Z2021-09-03T07:13:20.572Z

<img src="https://teletype.in/files/6b/6b65a43e-995e-4845-bd75-d0d53255a776.png">Прежде чем использовать шрифт, проверьте лицензию, но 98% из них можно использовать бесплатно для личных и коммерческих проектов.

<p id="85jF">Прежде чем использовать шрифт, проверьте лицензию, но 98% из них можно использовать бесплатно для личных и коммерческих проектов.</p> <h2 id="qOai"><strong>Signature Fonts</strong></h2> <figure id="sOnB" class="m_column"> <img src="https://teletype.in/files/6b/6b65a43e-995e-4845-bd75-d0d53255a776.png" width="1200" /> </figure> <p id="OT7P">0⁣1. <a href="https://www.dafont.com/signerica.font" target="_blank">Signerica</a><br />02. <a href="https://www.dafont.com/white-angelica.font" target="_blank">White Angelica</a><br />03. <a href="https://www.dafont.com/bacana.font" target="_blank">Bacana</a><br />04. <a href="https://www.dafont.com/sugar-candy-2.font" target="_blank">Sugar Candy</a><br />05. <a href="https://www.dafont.com/mungsignature.font" target="_blank">Mung Signature</a><br />06. <a href="https://www.dafont.com/notera.font" target="_blank">Notera</a><br />07. <a href="https://www.dafont.com/brittany-signature.font" target="_blank">Brittany Signature</a><br />08. <a href="https://www.dafont.com/amillia-signature.font" target="_blank">Amillia Signature</a><br />09. <a href="https://www.dafont.com/signatrue.font" target="_blank">Signatrue</a><br />10. <a href="https://www.dafont.com/amostely-signature.font" target="_blank">Amostely</a></p> <h2 id="qARj"><strong>Script Fonts</strong></h2> <figure id="69hj" class="m_column"> <img src="https://teletype.in/files/f0/f0347542-3e59-4e82-8d62-78bce5b6d12c.png" width="1200" /> </figure> <p id="3JgY">01. <a href="https://fonts.google.com/specimen/Grand+Hotel" target="_blank">Grand Hotel</a><br />0⁣2. <a href="https://www.pixelsurplus.com/freebies/hunter-river-free-signature-font" target="_blank">Hunter River⁣⁣</a><br />03. <a href="https://fonts.google.com/specimen/Yellowtail" target="_blank">Yellowtail</a><br />0⁣4. <a href="https://fonts.google.com/specimen/Sacramento" target="_blank">Sacramento⁣</a><br />0⁣5. <a href="https://fonts.google.com/specimen/Alex+Brush" target="_blank">Alex Brush</a><br />⁣06. <a href="https://www.dafont.com/cursif.font" target="_blank">Cursif⁣</a><br />0⁣7. <a href="https://www.dafont.com/sophia-2.font" target="_blank">Sophia</a>⁣<br />0⁣8. <a href="https://www.dafont.com/blenda-script.font" target="_blank">Blenda⁣</a><br />0⁣9. <a href="https://www.pixelsurplus.com/freebies/buffalo" target="_blank">Buffalo⁣</a><br />⁣10. <a href="https://fonts.google.com/specimen/Cookie" target="_blank">Cookie⁣</a></p> <h2 id="8Rg5"><strong>Calligraphy Fonts</strong></h2> <figure id="iE1H" class="m_column"> <img src="https://teletype.in/files/15/1561f60c-1b95-473d-9c13-ed55bf8061ef.png" width="1200" /> </figure> <p id="u6ER">0⁣1. <a href="https://www.dafont.com/noelan.font" target="_blank">Noelan</a><br />0⁣2. <a href="https://www.dafont.com/mattilda.font" target="_blank">Mattilda</a><br />0⁣3. <a href="https://www.dafont.com/calingham.font" target="_blank">Calingham</a><br />0⁣4. <a href="https://www.dafont.com/elaya-script.font" target="_blank">Elaya</a><br />0⁣5. <a href="https://www.dafont.com/laurence.font" target="_blank">Laurance</a><br />0⁣6. <a href="http://freedesignresources.net/balqis-free-font/" target="_blank">Balqis</a><br />0⁣7. <a href="https://www.dafont.com/onthel.font" target="_blank">Onthel</a><br />0⁣8. <a href="https://www.pixelsurplus.com/freebies/salmela" target="_blank">Salmela</a><br />0⁣9. <a href="https://www.dafontfree.io/aprillia-script-font-free/" target="_blank">Aprillia</a><br />⁣10. <a href="https://pixelbuddha.net/freebie/lauren-script-font-free-download" target="_blank">Lauren</a></p> <h2 id="KXLK"><strong>Serif Fonts</strong></h2> <figure id="Xq7q" class="m_column"> <img src="https://teletype.in/files/06/06cafb39-d699-48ee-ba07-5afae00b9231.png" width="1200" /> </figure> <p id="wEMF">⁣01. <a href="https://www.dafont.com/recoleta.font" target="_blank">Recoleta⁣</a><br />02. <a href="https://fonts.google.com/specimen/Crimson+Pro" target="_blank">Crimson Pro</a><br />03. <a href="https://www.dafont.com/mermaid.font" target="_blank">Mermaid</a><br />04. <a href="https://www.dafont.com/made-saonara.font" target="_blank">MADE Saonara</a><br />05. <a href="https://www.dafont.com/chapaza.font" target="_blank">Chapaza</a><br />06. <a href="https://www.fontsquirrel.com/fonts/playfair-display" target="_blank">Playfair</a><br />07. <a href="https://www.dafont.com/vogue.font" target="_blank">Vogue</a><br />08. <a href="https://www.dafont.com/bambi.font" target="_blank">Bambi</a><br />09. <a href="https://www.dafont.com/made-canvas.font" target="_blank">MADE Canvas</a><br />10. <a href="https://fonts.google.com/specimen/PT+Serif" target="_blank">PT Serif</a></p> <h2 id="eHas"><strong>Slab Serif Fonts</strong></h2> <figure id="uY1Q" class="m_column"> <img src="https://teletype.in/files/05/056be528-c021-42fe-992b-a70a1d365854.png" width="1200" /> </figure> <p id="xGiG">01. <a href="https://fonts.google.com/specimen/Roboto+Slab" target="_blank">Roboto Slab</a><br />02. <a href="http://atipofoundry.com/fonts/knile" target="_blank">Knile Slab⁣</a><br />03. <a href="https://befonts.com/finador-slab-font-family.html" target="_blank">Finador</a><br />04. <a href="https://befonts.com/braderjohn-slab-serif-font.html" target="_blank">Brador John</a><br />05. <a href="https://fonts.google.com/specimen/Zilla+Slab" target="_blank">Zilla Slab</a><br />06. <a href="https://fonts.google.com/specimen/Crete+Round" target="_blank">Crete Round</a><br />07. <a href="http://fonts.artill.de/collection/paulslab" target="_blank">Paul Slab</a><br />08. <a href="https://fonts.google.com/specimen/Antic+Slab" target="_blank">Antic Slab</a><br />09. <a href="http://fonts.artill.de/collection/atletico" target="_blank">Atletico</a><br />10. <a href="https://www.fontsquirrel.com/fonts/alfa-slab" target="_blank">Alfa Slab</a></p> <p id="d66G"></p> <hr /> <p id="6YBS"></p> <p id="qHM3"><a href="https://t.me/DesignBoard" target="_blank">@DesignBoard</a> — живой канал для UX/UI дизайнеров с уникальной лентой: клёвые решения в интерфейсах и UX дичь, интересные находки, мысли за дизайн и около того.</p> designboard:parallax-illustration2019-06-26T10:17:07.797Z2021-09-03T07:14:02.646Z

<img src="https://teletype.in/files/00/00e80dab-763b-4732-bcda-495f845aff9b.png">🌟 View Demo

<figure id="p0Gx" class="m_column"> <img src="https://teletype.in/files/00/00e80dab-763b-4732-bcda-495f845aff9b.png" width="1200" /> </figure> <p id="E4Jh">🌟 <a href="https://codepen.io/designboard/full/wLJWmP" target="_blank">View Demo</a></p> <p id="VTUk">📥 <a href="https://yadi.sk/d/NlepKtCzNMcB-w" target="_blank">Download Source</a></p> <p id="0rWV">🔗 <a href="https://www.skillshare.com/site/join?teacherRef=1993931&via=teacher-referral&utm_campaign=teacher-referral&utm_source=ShortUrl&utm_medium=teacher-referral&t=Art-Code-Create-and-code-an-interactive-parallax-illustration&sku=1862124549" target="_blank">Skillshare Link</a></p> <p id="8lrT"></p> <p id="17tv">In this class you&#x27;ll create an interactive parallax illustration using Procreate along with HTML5, CSS, and JavaScript. I&#x27;ve tried to organize it from simple sketching and drawing to more complex coding things at the end, so hopefully no matter how far you make it, you can learn something! Also make sure you check out the project section for completed example code that you can compare to.</p> <p id="Iq0Z"></p> <p id="6Bee">A few things we&#x27;ll cover along the way:</p> <p id="rufh">• QuickMenu, Layer Select, QuickShape, and more in Procreate<br />• Some Basics of HTML5, CSS, and JavaScript<br />• Touch and mouse events in JavaScript<br />• Accessing the gyroscope in JavaScript<br />• HTML5 canvas and requestAnimationFrame</p> <p id="ru4K"></p> <p id="GQF8">Tools used in this tutorial include:</p> <p id="zFLy">• iPad Pro 12.9&quot; w/ Apple Pencil and Smart Keyboard Folio<br />• <a href="https://apps.apple.com/us/app/procreate/id425073498" target="_blank">Procreate</a> (you can use any layer-based illustration software, but I prefer Procreate)<br />• <a href="https://itunes.apple.com/us/app/coda-by-panic/id500906297?mt=8&ign-mpt=uo%3D4" target="_blank">Coda</a> (a free alternative for iPad is <a href="https://apps.apple.com/us/app/javascript-anywhere-jsanywhere/id363452277" target="_blank">JavaScript Anywhere</a>, but I don&#x27;t go into as much detail on how to use it)<br />• Safari on iPad</p> <p id="sKny"></p> <p id="zZiF">While I try to keep things as simple as possible, this will be easier if you have some basic familiarity with web development. Here&#x27;s some helpful HTML, CSS, and JavaScript resources:</p> <p id="uRHb">• <a href="https://www.w3schools.com/" target="_blank">w3schools.com</a><br />• <a href="https://www.codecademy.com/learn/learn-html" target="_blank">Codecademy — Introduction to HTML</a><br />• <a href="https://www.codecademy.com/learn/learn-css" target="_blank">Codecademy — Learn CSS</a><br />• <a href="https://www.codecademy.com/learn/introduction-to-javascript" target="_blank">Codecademy — Introduction to JavaScript</a></p> <p id="jLL7"></p> <h3 id="s78A">Let&#x27;s Go! Use layers and code to add a new dimension to your artwork!</h3> <p id="TMbu"></p> <figure id="rvAq" class="m_column"> <iframe src="https://www.youtube.com/embed/OkrpaJ3UEyc?autoplay=0&loop=0&mute=0"></iframe> <figcaption>Intro. Jarom Vogel · Start</figcaption> </figure> <p id="exZM"></p> <figure id="QZFb" class="m_column"> <iframe src="https://www.youtube.com/embed/Ec_yy-4K1r4?autoplay=0&loop=0&mute=0"></iframe> <figcaption>Drawing. Part 1 · Concept and Thumbnails</figcaption> </figure> <p id="V064"></p> <figure id="dtRF" class="m_column"> <iframe src="https://www.youtube.com/embed/zrbCKv-KUA4?autoplay=0&loop=0&mute=0"></iframe> <figcaption>Drawing. Part 2 · Refining Your Sketch</figcaption> </figure> <p id="eqZc"></p> <figure id="YEKJ" class="m_column"> <iframe src="https://www.youtube.com/embed/nevbAbpo5w8?autoplay=0&loop=0&mute=0"></iframe> <figcaption>Drawing. Part 3 · Blocking in Colors</figcaption> </figure> <p id="26wq"></p> <figure id="prWN" class="m_column"> <iframe src="https://www.youtube.com/embed/QWArflGQyCk?autoplay=0&loop=0&mute=0"></iframe> <figcaption>Coding. Part 1 · Preparing Your Layers</figcaption> </figure> <p id="wdJE"></p> <figure id="mc8w" class="m_column"> <iframe src="https://www.youtube.com/embed/diz2-0YtFIc?autoplay=0&loop=0&mute=0"></iframe> <figcaption>Coding. Part 2 · HTML, CSS, and JavaScript</figcaption> </figure> <p id="YcsD"></p> <figure id="yzS8" class="m_column"> <iframe src="https://www.youtube.com/embed/Fq8Ch8tr_yA?autoplay=0&loop=0&mute=0"></iframe> <figcaption>Coding. Part 3 · Drawing to the Canvas</figcaption> </figure> <p id="cMyj"></p> <figure id="3ZTl" class="m_column"> <iframe src="https://www.youtube.com/embed/pBrlTw0sKpQ?autoplay=0&loop=0&mute=0"></iframe> <figcaption>Coding. Part 4 · Touch and Mouse Controls</figcaption> </figure> <p id="f5Up"></p> <figure id="ox2a" class="m_column"> <iframe src="https://www.youtube.com/embed/VA0imFgV-gU?autoplay=0&loop=0&mute=0"></iframe> <figcaption>Coding. Part 5 · Motion Controls</figcaption> </figure> <p id="6cNE"></p> <figure id="yAc6" class="m_column"> <iframe src="https://www.youtube.com/embed/6f3vSBrAK2c?autoplay=0&loop=0&mute=0"></iframe> <figcaption>Coding. Part 6 · Finishing Touches</figcaption> </figure> <p id="8szb"></p> <blockquote id="W38R">Jarom Vogel is a freelance illustrator who occasionally dabbles in motion, design, and development. He enjoys beaches, fine ice creams, vanilla coke, technology, skiing, and making things. He graduated with a BFA in illustration from Brigham Young University in 2015. Previous clients include Apple, Procreate, Nobrow/Flying Eye Books, First Round Capital, HarperCollins UK, Aquila Magazine, Harmonix Music, and Cotopaxi.<br /><br />Jarom Vogel, Digital Illustrator</blockquote> <p id="iIsV"></p> <hr /> <p id="yfte"></p> <p id="h72v"><a href="https://t.me/DesignBoard" target="_blank">@DesignBoard</a> — живой канал для UX/UI дизайнеров с уникальной лентой: клёвые решения в интерфейсах и UX дичь, интересные находки, мысли за дизайн и около того.</p>