I’m Potzo — a digital designer & developer from northern Croatia. https://beta.potzo.net/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 in app and web projects where layout was very clean. 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://beta.potzo.net/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 we just check the html class attribute and switch the theme accordingly. document.addEventListener('DOMContentLoaded', function() { const button = document.getElementById("theme-toggle"); button.addEventListener('click',function () { const currentTheme = html.getAttribute('class'); const switchTheme = currentTheme === 'light' ? 'dark' : 'light'; setTheme(switchTheme); }); }); 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://beta.potzo.net/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