   
                    
 
<!DOCTYPE html>

<html lang="en">

<head>
	
	<title>Nofont.com | </title>

	<meta charset="utf-8">
	<meta name="viewport" content = "width = device-width, initial-scale = 1, user-scalable = yes" />
	<meta name="author" content="Andreas Carlsson – Nofont">

	<meta name="description" property="og:description" content="" />
   <meta property="og:url" content="" />
   <meta property="og:image" content="" />

   <meta property="og:type" content="article" />
   <meta property="og:title" content="" />
   <meta property="fb:app_id" content="102943789814433" />
   <meta name="twitter:card" content="summary_large_image"/>
	
	<link rel="stylesheet" href="https://nofont.com/users/journal/content/templates/nofont_twentyfive_theme/css/reset.css"> <!-- CSS reset -->
   <link rel="stylesheet" type="text/css" href="https://nofont.com/users/journal/content/templates/nofont_twentyfive_theme/css/framework-styles.css" media="screen" />

   <link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Alegreya+Sans+SC:ital,wght@0,100;0,300;0,400;0,500;0,700;0,800;0,900;1,100;1,300;1,400;1,500;1,700;1,800;1,900&family=Alegreya+Sans:ital,wght@0,100;0,300;0,400;0,500;0,700;0,800;0,900;1,100;1,300;1,400;1,500;1,700;1,800;1,900&display=swap" rel="stylesheet">

	<link rel="stylesheet" type="text/css" href="https://nofont.com/users/journal/content/templates/nofont_twentyfive_theme/css/typeplate.css" media="screen" />
	<link rel="stylesheet" type="text/css" href="https://nofont.com/users/journal/content/templates/nofont_twentyfive_theme/css/case.css" media="screen" />
	<link rel="stylesheet" type="text/css" href="https://nofont.com/users/journal/content/templates/nofont_twentyfive_theme/css/page_specific.css" media="screen" />

</head>

<body id="" class="category ">


<input type="checkbox" id="navcheck" role="button" title="menu">
<label for="navcheck" aria-hidden="true" title="menu">
    <span class="burger">
        <span class="bar">
            <span class="text visuallyhidden">Menu</span>
        </span>
    </span>
</label>
<nav id="menu">
    <a href="/"><img class="navLogo" src="https://nofont.com/users/journal/content/templates/nofont_twentyfive_theme/imgs/craft_logo.svg" onerror="this.onerror=null; this.src='https://nofont.com/users/journal/content/templates/nofont_twentyfive_theme/imgs/craft_logo.svg'" alt="Back to Nofont.com mainpage"></a>
    <div class="navInfo">Articles, behind the scenes and inspiration from stuff I enjoy! <i>Pick your topic!</i></div> 
    <ul class="section-list category-list"><li class="section-title category-title draft"><a href="/draft"><h3>Draft</h3></a><ul class="post-list"><li class="post-title"><a href="/draft/ai-series-9---why-we-built-a-vibe-coding-design-system">Ai series 9 - Why we built a vibe coding design system</a></li><li class="post-title"><a href="/draft/ai-series-10---how-we-built-voyados-vibe-coding-design-system">Ai series 10 - How we built Voyados vibe coding design system</a></li><li class="post-title"><a href="/draft/ai-series-11---user-testing-the-vibe-coding-system">Ai series 11 - User testing the vibe coding system</a></li><li class="post-title"><a href="/draft/audio-feedback-blog">Audio Feedback Blog</a></li><li class="post-title"><a href="/draft/ai-series---robot-browsers">Ai series - robot browsers</a></li><li class="post-title"><a href="/draft/bringing-your-favorite-app-back-from-the-dead">Bringing your favorite app back from the dead</a></li><li class="post-title"><a href="/draft/ai-series-9---trimming-the-excess-off-proposals">Ai series 9 - Trimming the excess off proposals</a></li><li class="post-title"><a href="/draft/ai-series-7---separating-money-from-noise">Ai series 7 - Separating money from noise</a></li><li class="post-title"><a href="/draft/furka---alps-vertigo-and-global-warming">Furka - Alps vertigo and global warming</a></li><li class="post-title"><a href="/draft/stickers--store-and-stuff">Stickers, store and stuff</a></li><li class="post-title"><a href="/draft/bunker-update">Bunker update</a></li><li class="post-title"><a href="/draft/the-rule-of-three">The rule of three</a></li><li class="post-title"><a href="/draft/svedala">Svedala</a></li><li class="post-title"><a href="/draft/it-is-all-about-the-accidents">It is all about the accidents</a></li><li class="post-title"><a href="/draft/skistar-editing">Skistar editing</a></li><li class="post-title"><a href="/draft/vegg-vegg-vegg">Vegg vegg vegg</a></li><li class="post-title"><a href="/draft/small-caps-for-headlines">Small Caps for headlines</a></li><li class="post-title"><a href="/draft/never-chase-perfection">Never chase perfection</a></li><li class="post-title"><a href="/draft/i-never-liked-ux">I never liked UX</a></li><li class="post-title"><a href="/draft/my-fav-documentaries">My fav documentaries</a></li></ul></li><li class="section-title category-title journal"><a href="/journal"><h3>Journal</h3></a><ul class="post-list"><li class="post-title"><a href="/journal/skrivr-development-restarted---adding-seo-features">Skrivr development restarted - adding SEO Features</a></li><li class="post-title"><a href="/journal/one-day---the-videos">One day - the videos</a></li><li class="post-title"><a href="/journal/one-day-one-person-one-city">One day one person one city</a></li><li class="post-title"><a href="/journal/stills-pixacao">Stills Pixacao</a></li><li class="post-title"><a href="/journal/my-favourite-words">My favourite words</a></li><li class="post-title"><a href="/journal/childhood-logotypes">Childhood logotypes</a></li></ul></li><li class="section-title category-title typefaces"><a href="/typefaces"><h3>Typefaces</h3></a><ul class="post-list"><li class="post-title"><a href="/typefaces/open-source-sans-serif-fonts-for-body-text">Open source sans-serif fonts for body text</a></li><li class="post-title"><a href="/typefaces/open-source-headline-fonts">Open source headline fonts</a></li><li class="post-title"><a href="/typefaces/free-kerning-templates">Free kerning templates</a></li><li class="post-title"><a href="/typefaces/beagle---designing-a-typeface-for-fun">Beagle - designing a typeface for fun</a></li><li class="post-title"><a href="/typefaces/noeud-drop-caps-by-ellmer-stefan">Noeud drop caps by Ellmer Stefan</a></li><li class="post-title"><a href="/typefaces/open-source-serif-fonts-for-body-text">Open source serif fonts for body text</a></li></ul></li><li class="section-title category-title typography"><a href="/typography"><h3>Typography</h3></a><ul class="post-list"><li class="post-title"><a href="/typography/updates-to-typesetter">Updates to Typesetter</a></li><li class="post-title"><a href="/typography/optimal-line-length-tool">Optimal line length tool</a></li><li class="post-title"><a href="/typography/the-typography-of-doug-engelbart-and-the-nls">The typography of Doug Engelbart and the NLS</a></li><li class="post-title"><a href="/typography/handwriting-keyboards-and-the-devaluation-of-typography">Handwriting keyboards and the devaluation of typography</a></li><li class="post-title"><a href="/typography/two-weeks-in-with-typeplate-and-markdown">Two weeks in with Typeplate and Markdown</a></li><li class="post-title"><a href="/typography/this-site-now-has-automated-typographic-features">This site now has automated typographic features</a></li><li class="post-title"><a href="/typography/automated-webtypography-with-opentypography-and-php">Automated webtypography with OpenTypography and PHP</a></li><li class="post-title"><a href="/typography/typeplate---a-typographic-starter-kit">Typeplate - a typographic starter kit</a></li></ul></li><li class="section-title category-title asides"><a href="/asides"><h3>Asides</h3></a><ul class="post-list"><li class="post-title"><a href="/asides/skrivr">Skrivr</a></li><li class="post-title"><a href="/asides/opentypography">OpenTypography</a></li></ul></li><li class="section-title category-title behind-the-case"><a href="/behind-the-case"><h3>Behind the Case</h3></a><ul class="post-list"><li class="post-title"><a href="/behind-the-case/ryde-from-prototype-to-the-olympics">Ryde-From prototype to the Olympics</a></li><li class="post-title"><a href="/behind-the-case/skistar">Skistar</a></li></ul></li><li class="section-title category-title ai-for-designers"><a href="/ai-for-designers"><h3>Ai for designers</h3></a><ul class="post-list"><li class="post-title"><a href="/ai-for-designers/ai-series-8---concert-visuals-with-claude">Ai series 8 - Concert visuals with Claude</a></li><li class="post-title"><a href="/ai-for-designers/ai-series-7---pain-free-animations-with-ai">Ai series 7 - Pain-free animations with AI</a></li><li class="post-title"><a href="/ai-for-designers/ai-series-6---pattern-sniffing">Ai series 6 - Pattern sniffing</a></li><li class="post-title"><a href="/ai-for-designers/ai-series-5---a-la-carte-image-delivery">Ai series 5 - A la carte image delivery</a></li><li class="post-title"><a href="/ai-for-designers/ai-series-4---cooking-or-catering">Ai series 4 - Cooking or catering</a></li><li class="post-title"><a href="/ai-for-designers/ai-series-3---making-pizza-with-claude">Ai series 3 - Making pizza with Claude</a></li><li class="post-title"><a href="/ai-for-designers/ai-series-2---cooking-up-your-first-app">Ai series 2 - Cooking up your first app</a></li><li class="post-title"><a href="/ai-for-designers/ai-series-1---scale-as-a-designer-with-custom-apps">Ai series 1 - Scale as a designer with custom apps</a></li></ul></li></ul>
    <hr>
    <div class="secondary u-flex u-sizeFull u-flexRow u-flexNoWrap">
		<ul class="static-list"><li class="static-title"><a href="/static/colophon">Colophon</a></li><li class="static-title"><a href="/static/jestchest">Jestchest</a></li></ul>
		<ul class="social u-flex u-flexRow u-sizeFull">
			<!-- <li><a href="previously-at/">Previous writing</a></li> -->
			<!-- <li><a href="https://twitter.com/nofont">Twitter</a></li> -->
			<li class="u-flexItem"><a href="https://instagram.com/nofont"><img class="icon social instagram" src="https://nofont.com/users/journal/content/templates/nofont_twentyfive_theme/imgs/icons/icon-instagram.svg"><span>Instagram</span></a></li>
			<li class="u-flexItem"><a href="https://github.com/nofont"><img class="icon social github" src="https://nofont.com/users/journal/content/templates/nofont_twentyfive_theme/imgs/icons/icon-github.svg"><span>GitHub</span></a></li>
			<li class="u-flexItem"><a href="https://soundcloud.com/nighly/tracks"><img class="icon social soundcloud" src="https://nofont.com/users/journal/content/templates/nofont_twentyfive_theme/imgs/icons/icon-soundcloud.svg"><span>Soundcloud</span></a></li>
			<li class="u-flexItem"><a href="https://vimeo.com/nofont"><img class="icon social vimeo" src="https://nofont.com/users/journal/content/templates/nofont_twentyfive_theme/imgs/icons/icon-vimeo.svg"><span>Vimeo</span></a></li>
			<!-- <li><a href="https://www.linkedin.com/in/nofont/"><img class="icon social" src="https://nofont.com/users/journal/content/templates/nofont_twentyfive_theme/imgs/icons/icon-linkedin.svg">LinkedIn</a></li> -->
		</ul>
	</div>
</nav>

<!--
icon-colophon.svg
icon-jestchest.svg
-->



   <!-- Header -->




   
   
    
<section class="category-list category-list--cards">

    
</section>


<footer>

	<div class="column-wrapper u-flex u-flexColumn">
		
		<!--
		<div class="column preamble">
			<img src="https://nofont.com/users/journal/content/templates/nofont_twentyfive_theme/imgs/andreas.jpg" alt="Andreas Carlsson">
			Nofont.com is run by Andreas Carlsson, creative director at digital agency <a href="http://www.nansen.com">Nansen</a>. Here I mostly experiment with and write about typography but I also have a love/hate relation to design, code, .txt and creativity.
		</div>
		-->
		
		<div class="u-flexItem left">
			<!-- <a href="/"><img class="footerLogo" src="https://nofont.com/users/journal/content/templates/nofont_twentyfive_theme/imgs/nofont_logo.svg" onerror="this.onerror=null; this.src='https://nofont.com/users/journal/content/templates/nofont_twentyfive_theme/imgs/nofont_logo.png'" alt="Back to Nofont.com mainpage"></a> -->
			
				<svg class="footerLogo" width="100px" height="auto" viewBox="0 0 100 165" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
			    <title>nofont_logo</title>
			    <defs></defs>
			    <g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd" sketch:type="MSPage">
			        <path d="M40.146,100.349 C38.805,88.333 36.176,84.439 34.822,80.267 C32.421,72.877 35.748,60.045 35.748,60.045 C35.748,60.045 28.66,73.366 28.03,77.18 C26.434,86.898 27.332,94.112 27.47,99.923 C23.648,97.772 22.672,86.287 21.325,74.971 C17.783,85.357 16.634,101.068 15.882,106.824 C14.272,101.677 11.082,98.875 8.018,97.719 C9.926,101.556 8.685,110.316 8.015,114.09 C6.311,123.716 11.796,130.761 11.796,130.761 C11.796,130.761 7.335,128.206 5.642,123.658 C4.5,120.589 2.598,116.018 2.606,112.569 C2.614,109.503 3.769,107.59 3.784,101.454 C3.8,94.555 3.049,87.655 0,81.899 L0.383,81.517 C4.208,84.592 7.269,86.899 9.558,91.505 C11.87,86.144 15.734,73.888 15.749,67.757 C15.771,58.941 14.237,58.937 14.26,49.738 L14.76,44.554 C18.866,53.43 21.524,57.422 26.495,62.033 C29.57,58.591 30.351,52.461 30.361,48.244 C30.386,38.279 27.469,36.119 27.483,30.37 L27.733,26.39 C30.787,30.997 32.241,31.964 36.643,35.127 C41.982,38.965 42.424,45.386 43.639,49.058 C45.201,35.458 41.242,29.639 41.158,22.207 C41.049,12.625 50.794,0 50.794,0 L50.786,3.067 C50.76,13.799 50.451,18.22 57.638,26.079 C71.023,40.718 70.226,47.576 70.226,47.576 C74.011,37.746 70.276,27.262 70.276,27.262 C74.863,32.255 78.197,38.475 80.185,44.867 C86.466,65.087 84.732,71.759 83.957,73.672 C89.714,71.005 92.898,64.772 93.212,51.466 C96.648,57.607 98.17,61.826 98.153,68.726 C98.139,74.091 96.979,78.305 96.975,79.838 C96.956,87.887 100.008,94.025 99.988,102.078 C99.975,107.442 95.993,122.729 91.368,130.582 C91.368,130.582 93.438,115.859 91.532,111.255 C90.388,109.719 90.007,108.184 90.012,106.268 C90.027,100.135 91.937,102.823 91.955,95.542 C91.978,85.959 90.838,82.122 90.081,78.288 C90.081,78.288 85.911,85.562 84.729,88.418 C80.889,97.711 78.01,91.033 76.671,101.032 C76.671,101.032 71.644,97.03 72.842,87.073 C73.163,84.411 75.897,79.402 75.911,73.653 C75.92,70.204 75.166,64.453 73.644,60.233 C73.644,60.233 73.138,69.599 68.622,77.087 C67.466,78.999 60.707,83.118 59.736,100.551 C57.823,99.397 54.189,91.674 56.253,80.773 C61.67,52.16 52.605,43.316 52.605,43.316 C52.602,44.466 53.479,46.004 53.357,48.685 C52.457,68.646 44.072,60.524 40.146,100.349 L40.146,100.349 Z M23.238,114.238 L23.199,130.05 L29.755,130.067 L29.739,136.623 L36.298,136.639 L36.282,143.198 L42.837,143.214 L42.821,149.772 L48.896,149.786 L48.881,156.002 L52.948,156.012 L52.964,149.757 L58.636,149.771 L58.652,143.214 L65.21,143.23 L65.226,136.67 L71.785,136.687 L71.801,130.13 L78.318,130.146 L78.357,114.373 L62.543,114.334 L62.527,120.892 L55.97,120.876 L55.954,127.412 L45.536,127.386 L45.552,120.809 L38.994,120.793 L39.01,114.277 L23.238,114.238 L23.238,114.238 Z M21.44,105.869 L41.158,105.917 L41.142,112.434 L47.7,112.45 L47.683,119.027 L54.166,119.043 L54.182,112.506 L60.741,112.522 L60.757,105.966 L80.504,106.014 L80.488,112.53 L87.047,112.547 L86.998,132.294 L80.48,132.278 L80.464,138.834 L73.905,138.818 L73.889,145.378 L67.332,145.362 L67.316,151.919 L60.758,151.903 L60.742,158.461 L54.184,158.445 L54.168,165.002 L47.534,164.986 L47.551,158.467 L40.996,158.451 L41.012,151.895 L34.453,151.879 L34.469,145.321 L27.912,145.305 L27.928,138.748 L21.37,138.731 L21.386,132.174 L14.829,132.158 L14.877,112.409 L21.424,112.425 L21.44,105.869 L21.44,105.869 Z" id="Imported-Layers" sketch:type="MSShapeGroup"></path>
			    </g>
			</svg>
		</div>
	
		<div class="u-flexItem middle">
			<h3>About</h3>
			<ul class="static-list"><li class="static-title"><a href="/static/colophon">Colophon</a></li><li class="static-title"><a href="/static/jestchest">Jestchest</a></li></ul>
			<ul class="social">
				<li><a href="https://nofont.studio">Video portfolio</a></li>
				<li><a href="https://nofont.design">Design & UX portfolio</a></li>
			</ul>
		</div>
		<div class="u-flexItem middle">
			<h3>Products</h3>
			<ul class="social">
				<li><a href="https://www.nofont.com/asides/skrivr">Skrivr – publishing platform</a></li>
				<li><a href="https://www.nofont.com/asides/opentypography">OpenTypography – micro typography</a></li>
				<li><a href="https://bartend.io">Bartend – wine management app</a></li>
			</ul>
		</div>	
		<div class="u-flexItem right">
			<h3>Find me on</h3>
			<ul class="social">
				<!-- <li><a href="previously-at/">Previous writing</a></li> -->
			<!--	<li><a href="https://twitter.com/nofont">Twitter</a></li> -->
				<li><a href="https://instagram.com/nofont">Instagram</a></li>
				<li><a href="https://github.com/nofont">GitHub</a></li>
			<!--	<li><a href="https://soundcloud.com/nighly">Soundcloud</a></li> -->
				<li><a href="https://vimeo.com/nofont">Vimeo</a></li>
			</ul>
		</div>
	</div>



</footer>

	<!-- <script type="text/javascript" src="https://nofont.com/users/journal/content/templates/nofont_twentyfive_theme/scripts/jquery.horunge.min.js"></script> -->
	<!-- <script type="text/javascript" src="https://nofont.com/users/journal/content/templates/nofont_twentyfive_theme/scripts/modernizr.js"></script> -->
	<!-- <script type="text/javascript" src="https://nofont.com/users/journal/content/templates/nofont_twentyfive_theme/scripts/velocity.min.js"></script> -->
	<!-- <script type="text/javascript" src="https://nofont.com/users/journal/content/templates/nofont_twentyfive_theme/scripts/main.js"></script> -->
	<script type="text/javascript" src="https://nofont.com/users/journal/content/templates/nofont_twentyfive_theme/scripts/jquery-3.6.3.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
	<script type="text/javascript" src="https://nofont.com/users/journal/content/templates/nofont_twentyfive_theme/scripts/gsap-plugins/ScrollSmoother.min.js"></script>

	<script type="text/javascript" src="https://nofont.com/users/journal/content/templates/nofont_twentyfive_theme/scripts/Hyphenator_loader.js"></script>
	<script type="text/javascript" src="https://nofont.com/users/journal/content/templates/nofont_twentyfive_theme/scripts/interface.js"></script>

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-PDS7KB1PF8"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  
  // Check if path starts with '/draft' (covers both /draft and /draft/)
  if (!window.location.pathname.startsWith('/draft')) {
	gtag('config', 'G-PDS7KB1PF8');
  }
  //gtag('config', 'G-PDS7KB1PF8');
</script>

</body>

</html>