I’m Potzo — a digital designer & developer from northern Croatia. https://potzo.net/blog/amazing-font-discoveries-2022/ It's that time of year. Another year, another post 😀 I decided to make another collection of fonts. This one will contain only newly discovered fonts that haven't been mentioned in the latest blog post. All of these I've used in the projects in one way or another. For some reason, that blog post is most visited page on my site, so naturally let's continue the trend! Most of listed fonts are free for commercial use. So feel free to use them as you'd like. All download links are provided. 1. Maragsa Maragsa is a beautiful modern semi-serif font which works nicely as a prominent display font. 2. Outfit Outfit is a variable geometric font and probably my favourite font I've used. 3. Be Vietnam Pro Be Vietnam Pro is the new variant of the original Be Vietnam and takes it to the next level. Engineered for better readability; and much more improvements. Originally on Github. 4. Spline Sans Spline Sans is a Grotesque purpose-built for UI interfaces, checkout processes, and paragraphs of text. To contribute ideas and feedback, see Github. 5. Mona Sans Mona Sans is a variable strong and versatile typeface, inspired by industrial-era grotesques. 6. Hubot Sans Hubot Sans is Mona Sans’s robotic sidekick. The typeface is designed with more geometric accents to lend a technical and idiosyncratic feel—perfect for headers and pull-quotes. 7. Figtree Figtree is a geometric sans serif font walking the line between simplicity and friendliness. It is minimalist but not stiff, casual but not silly. 8. Merchant Merchant is a serif typeface designed by Rajesh Rajput, ideal for logos, titles, brands, editorial design, and magazines. 9. Meshed Display Meshed Display is another great serif typeface from Rajesh Rajput which works well in big size. 10. Young Serif Young Serif is a heavy weight old style serif typeface, inspired initially by fonts like Plantin Infant or ITC Italian Old Style. The rounded curves on lowercase b or on the lowercase f, make it tender and generous. 11. FUNGIS FUNGIS comes in 3 styles and was made by combining the versatility of grotesque fonts with it's curves and cut bowls in some of the letterforms, making it neutral from a distance and a bit more nuanced up close. 12. Inter Tight Inter Tight is a specialized version of Inter with tighter spacing, for display usage. This version also has Roman and Italic styles. 13. Mukta Mukta is a Unicode compliant, versatile, contemporary, humanist, mono-linear typeface family available in seven weights. 14. Anybody Anybody is a variable font available in condensed all the way to extended weights. Thank you More posts will definitely follow! If you have something cool to share with me, let me know! Also, sorry again for the lack of posts 😅 Tue, 06 Dec 2022 00:00:00 +0100 https://potzo.net/blog/favourite-modern-fonts-2021/ Over the past few months, I have come across many great free sans-serif fonts. Here are just some that I've used in my most recent projects. Sometimes it can be difficult to find perfect font, but you really don't need large collection. Choosing the right typeface can have large impact on overall feel of the design. Depending on the project, I only rotate few of them at times. 1. Plus Jakarta Sans Plus Jakarta Sans is a versatile modern type family designed for +Jakarta City Branding in 2020, where each glyph has its own varieties with its own different characteristics. 2. Noah Noah is a great geometric sans which provides 4 styles for free. With sharp details and a distinctive arrangement, it further extends the limits of the x-height, providing unparalleled flexibility. 3. Spartan Spartan is an open-source typeface based on early 20th century American geometric sans serifs. To contribute to development see Github. 4. Inter Inter is a typeface carefully crafted & designed for computer screens. It comes in 9 styles, but it's also variable. I've used it many app and web projects. 5. Swansea Swansea is font designed way back in 1993. For some odd reason it went under my radar until recently. There are 4 styles and it's a great Helvetica replacement. 6. Kumbh Sans Kumbh Sans is a geometric font envisioned to serve as a multi-purpose font in modern web and mobile applications. Currently I use it on my site for text. 7. Satoshi Satoshi is the font I'm currently using on my site for headlines. Its design combines typically grotesk-style letterforms, with some characters that are quite geometrically-designed. 8. Manrope Manrope font is free for personal and commercial use. It's open-source and was recently converted to a variable font. 9. Strawford Strawford is another great font from Atipo Foundry. You can get it by paying what you want starting from 15EUR. 10. Lexend Lexend is a variable font made specifically to improve reading-proficiency. To contribute, see lexend.com. It has recently made it to Google fonts and there's 7 styles to choose from. Bonus fonts Here are some fonts that haven't made the list, but thought I would share as well: Nimbus Sans L, Gothic A1, HK Grotesk, IBM Plex Sans, Lunchtype 22. Thu, 24 Jun 2021 00:00:00 +0200 https://potzo.net/blog/automatic-theme-detection/ If you don't want your site to be glaring white when everything else on your system is dark, you've come to the right place! As you might have noticed I have automatic theme detection on my site and it's very easy to do. Currently, one way to do it is by using prefers-color-scheme. Let's begin. Javascript Let's start by selecting the html tag where theme class will be applied. If the theme is set in localStorage, it will set that theme. Otherwise, it will check prefers-color-scheme for dark match and set the default theme based on that. const html = document.querySelector("html"); const theme = window.localStorage.getItem('theme'); if ("theme" in localStorage) { html.setAttribute('class', theme); } else { window.matchMedia('(prefers-color-scheme: dark)').matches ? setTheme('dark') : setTheme('light'); } Now, let's create a function. When used, it will toggle the class for the html tag and set the value in the localStorage. function setTheme(theme) { html.setAttribute('class',theme); window.localStorage.setItem('theme',theme); } Let's use event listener for prefers-color-scheme media feature we mentioned earlier. This is the automatic part that changes theme based on the OS settings. window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => { e.matches ? setTheme('dark') : setTheme('light'); }); This will effectively change the theme on fly as you toggle the OS setting. If you don't want this behaviour you can use this alternative to check whenever preferred theme is already set in the storage. window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => { if ("theme" in localStorage) { html.setAttribute('class', theme); } else { e.matches ? setTheme('dark') : setTheme('light'); } }); We have to add event listener to the document itself, because the button hasn't loaded yet. On button click/tap we just check the html class attribute and switch the theme accordingly. function handler(evt) { evt.preventDefault(); const currentTheme = html.getAttribute('class'); const switchTheme = currentTheme === 'light' ? 'dark' : 'light'; setTheme(switchTheme); } document.addEventListener('DOMContentLoaded', function() { const button = document.getElementById("theme-toggle"); button.addEventListener('touchstart', handler); button.addEventListener('click', handler); }); HTML Let's add button for toggling the theme. It's not the greatest sun/moon transition ever. It's using faux mask overlay to achieve the effect I wanted. Haven't found a better solution yet. <button class="theme-toggle" id="theme-toggle"> <svg width="100%" height="100%" viewBox="0 0 14 14"> <circle class="main" cx="7" cy="7" r="5" /> <path class="shadow" d="M13,1l0,5.301c-0.724,1.027 -1.92,1.699 -3.272,1.699c-2.207,0 -4,-1.792 -4,-4c0,-1.194 0.525,-2.267 1.356,-3l5.916,0Z" /> <path class="overlay" d="M15,-1l-16,0l0,16l16,0l0,-16Zm-8,2.5c3.036,0 5.5,2.464 5.5,5.5c0,3.036 -2.464,5.5 -5.5,5.5c-3.036,0 -5.5,-2.464 -5.5,-5.5c0,-3.036 2.464,-5.5 5.5,-5.5Z" /> <g class="rays"> <path id="ray-1" d="M7,2.432l0,-0.932" /> <path id="ray-2" d="M10.209,3.791l0.653,-0.653" /> <path id="ray-3" d="M11.568,7l0.932,-0" /> <path id="ray-4" d="M10.209,10.209l0.653,0.653" /> <path id="ray-5" d="M7,11.568l0,0.932" /> <path id="ray-6" d="M3.791,10.209l-0.653,0.653" /> <path id="ray-7" d="M2.432,7l-0.932,0" /> <path id="ray-8" d="M3.791,3.791l-0.653,-0.653" /> </g> </svg> </button> SCSS This is scaled down version of my SCSS vars. Essentially just define your main colors here and you're good to go. Keep --toggle unchanged, because they will blend nicely to their corresponding theme via screen and multiply blend mode. :root { --toggle: #FFFFFF; --background: #F8F8F8; --text: #282435; &.dark { --toggle: #000000; --background: #1A191F; --text: #DDDBE4; } } $fast: .3s; $easing: cubic-bezier(0.250, 0.460, 0.450, 0.940); In this part we define the look, transition and animation of our toggle button. In order to fix the faux mask overlay we have to apply mix-blend-mode to the button itself. .theme-toggle { background-color: transparent; border: 0; padding: 0; display: block; width: 24px; height: 24px; cursor: pointer; outline: none; overflow: hidden; position: relative; mix-blend-mode: multiply; svg { position: absolute; top: 0; right: 0; } .overlay { fill: var(--toggle); } .main,.shadow { stroke: var(--text); stroke-width: 1px; transition: transform $fast $easing; } .main { transform: scale(0.5); stroke-width: 1.6px; transform-origin: center center; fill: transparent; } .shadow { fill: var(--toggle); transform-origin: top right; transform: translatex(10px) translatey(-10px); } .rays path { stroke: var(--text); stroke-width: 1px; stroke-dashoffset: 0; stroke-dasharray: 0; stroke-linecap: round; } @for $i from 1 to 9 { .rays path:nth-child(#{$i}) { transition-delay: $i * 0.03s; } } } .dark { .theme-toggle { mix-blend-mode: screen; .main { transform: scale(1); stroke-width: 1px; } .shadow { transform: translatex(0) translatey(0); } .rays path { stroke-width: 0px; stroke-dashoffset: 2; stroke-dasharray: 2; transition: all $fast $easing; } } } Final notes Generally, this should work in all modern browsers. But even if it doesn't, it loads the default light theme. And user still has an option to toggle it manually. Message me if you think you have better solution or code :) Important: In order to prevent colors flashing every time you visit some page, you need to include javascript in the header. Wed, 23 Jun 2021 00:00:00 +0200 https://potzo.net/blog/hello-world/ All my great (and terrible) ideas start spontaneous. I stumbled upon an article that explains why Designers should write. Don't expect the articles to be very profound. I will just share insights into my workflow. You will see design related stuff such as font/tool recommendations, UI/UX tips, etc. Maybe I will throw in some reviews here and there. Only time will tell. Design So to test out my writing skills, here's perfect opportunity, another website redesign. Redesign again?! It's a known fact that I update my site more often than I do my references ;) Throughout the years I had single page designs with exception of projects using page transition to open details. I wanted to try writing blog, so I went with classic layout. My portfolio was always as minimal as possible with a large focus on clean typography, subtle animations and huge whitespace. I also tend to change some elements occasionally. So this might not be the final look. I found very clean Satoshi and used it for headlines. It's free and variable, which is great for different weight variations. To pair with Satoshi, I've used Kumbh Sans, which is also free. Development The idea was to get something up and running just like the current site, but a bit more dynamic. I just wanted pages and posts to be in subfolders with some basic markdown done in *md files. What is also new is that I control the overall zoom level with just one value, which is font base size, defined for each viewport. That means all image sizes, paddings and margins are also controlled by that value. Pretty cool, eh? For grid I went with default bootstrap-grid. In vars.scss file I keep my color scheme for light and dark, font names, font sizes (rem), spacing (em), animation speeds, shadows, borders. etc. Default theme gets loaded based on the OS settings via prefers-color-scheme. If there's no match it loads light as default. You can also manually toggle the theme and it will get saved in local storage. I'm also aware of things like next.js, hugo or jekyll. The amount of work just isn't worth the time I would spent learning as I would have no projects to ever use it on. Design is still one of my main income source and frontend is only nifty when I'm doing some freelance projects. So, I'm sticking with PHP. Eww, PHP? Who is still using PHP in 2021? Well, according to the internet, a lot of sites. While browsing github, I've found a microblogging system called Nicholas. I did slight modification so that I can create custom page templates such as projects, about and contact. Next steps Soon, I will post article about my Strava, Last.fm and Trakt.tv PHP script for getting the data, just like I do on my About page. If you have feedback or want to correct my grammar, feel free to reach out to me! Tue, 22 Jun 2021 00:00:00 +0200