Most of listed fonts are free for commercial use. So feel free to use them as you'd like. All download links are provided.<\/p>\n
1. Maragsa<\/h4>\n
More posts will definitely follow!\nIf you have something cool to share with me, let me know!\nAlso, sorry again for the lack of posts \ud83d\ude05<\/p>"
},
{
"date": 1624485600,
"slug": "favourite-modern-fonts-2021",
"title": "10 favourite modern sans-serif font collection for 2021",
"image": "\/uploads\/favourite-modern-fonts-2021.jpg",
"excerpt": "My curated list of free and premium fonts for 2021",
"tags": [
"Fonts",
"Collection"
],
"body": " Over the past few months, I have come across many great free sans-serif fonts.\nHere are just some that I've used in my most recent projects. <\/p>\n 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.<\/p>\n Here are some fonts that haven't made the list, but thought I would share as well: Nimbus Sans L<\/a>, Gothic A1<\/a>, HK Grotesk<\/a>, IBM Plex Sans<\/a>, Lunchtype 22<\/a>.<\/p>"
},
{
"date": 1624399200,
"slug": "automatic-theme-detection",
"title": "Automatic OS theme detection with manual toggle",
"image": "\/uploads\/automatic-theme-detection.jpg",
"excerpt": "Learn how to implement theme detection based on the OS settings",
"tags": [
"JS",
"SCSS",
"HTML"
],
"body": " 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.\nCurrently, one way to do it is by using Let's start by selecting the Now, let's create a function. When used, it will toggle the class for the Let's use event listener for 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.<\/p>\n 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 Let's add button for toggling the theme.\nIt'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.<\/p>\n This is scaled down version of my SCSS vars. Essentially just define your main colors here and you're good to go. Keep 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 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. \nMessage me if you think you have better solution or code :)<\/p>\n Important: In order to prevent colors flashing every time you visit some page, you need to include javascript in the header.<\/em><\/p>"
},
{
"date": 1624312800,
"slug": "hello-world",
"title": "Hello world",
"image": "\/uploads\/hello-world.jpg",
"excerpt": "Wait, what? How did this become a thing?",
"tags": [
"Design",
"Development",
"PHP"
],
"body": " All my great (and terrible) ideas start spontaneous.\nI stumbled upon an article<\/a> that explains why Designers should write.<\/p>\n 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.<\/p>\n So to test out my writing skills, here's perfect opportunity, another website redesign.\nRedesign again?! It's a known fact that I update my site more often than I do my references ;)<\/p>\n 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.<\/p>\n 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.<\/p>\n I found very clean Satoshi<\/a> and used it for headlines. It's free and variable, which is great for different weight variations.\nTo pair with Satoshi, I've used Kumbh Sans<\/a>, which is also free.<\/p>\n 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.<\/p>\n 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.<\/p>\n 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.<\/p>\n 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.<\/p>\n I'm also aware of things like next.js<\/a>, hugo<\/a> or jekyll<\/a>.\nThe amount of work just isn't worth the time I would spent learning as I would have no projects to ever use it on. \nDesign 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.<\/p>\n Who is still using PHP in 2021? Well, according to the internet, a lot of sites.\nWhile browsing github, I've found a microblogging system called Nicholas<\/a>. I did slight modification so that I can create custom page templates such as projects, about and contact. <\/p>\n 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<\/a> page.<\/p>\n If you have feedback or want to correct my grammar, feel free to reach out to me!<\/p>"
}
]![\"Maragsa\"](\"\/uploads\/amazing-font-discoveries-2022-maragsa.jpg\")
\nMaragsa<\/a> is a beautiful modern semi-serif font which works nicely as a prominent display font.<\/p>\n2. Outfit<\/h4>\n
![\"Outfit\"](\"\/uploads\/amazing-font-discoveries-2022-outfit.jpg\")
\nOutfit<\/a> is a variable geometric font and probably my favourite font I've used.<\/p>\n3. Be Vietnam Pro<\/h4>\n
![\"Be](\"\/uploads\/amazing-font-discoveries-2022-bevietnampro.jpg\")
\nBe Vietnam Pro<\/a> 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<\/a>.<\/p>\n4. Spline Sans<\/h4>\n
![\"Spline](\"\/uploads\/amazing-font-discoveries-2022-splinesans.jpg\")
\nSpline Sans<\/a> is a Grotesque purpose-built for UI interfaces, checkout processes, and paragraphs of text. To contribute ideas and feedback, see Github<\/a>.<\/p>\n5. Mona Sans<\/h4>\n
![\"Mona](\"\/uploads\/amazing-font-discoveries-2022-monasans.jpg\")
\nMona Sans<\/a> is a variable strong and versatile typeface, inspired by industrial-era grotesques.<\/p>\n6. Hubot Sans<\/h4>\n
![\"Hubot](\"\/uploads\/amazing-font-discoveries-2022-hubotsans.jpg\")
\nHubot Sans<\/a> is Mona Sans\u2019s robotic sidekick. The typeface is designed with more geometric accents to lend a technical and idiosyncratic feel\u2014perfect for headers and pull-quotes.<\/p>\n7. Figtree<\/h4>\n
![\"Figtree\"](\"\/uploads\/amazing-font-discoveries-2022-figtree.jpg\")
\nFigtree<\/a> is a geometric sans serif font walking the line between simplicity and friendliness. It is minimalist but not stiff, casual but not silly.<\/p>\n8. Merchant<\/h4>\n
![\"Merchant\"](\"\/uploads\/amazing-font-discoveries-2022-merchant.jpg\")
\nMerchant<\/a> is a serif typeface designed by Rajesh Rajput, ideal for logos, titles, brands, editorial design, and magazines.<\/p>\n9. Meshed Display<\/h4>\n
![\"Meshed](\"\/uploads\/amazing-font-discoveries-2022-mesheddisplay.jpg\")
\nMeshed Display<\/a> is another great serif typeface from Rajesh Rajput which works well in big size.<\/p>\n10. Young Serif<\/h4>\n
![\"Young](\"\/uploads\/amazing-font-discoveries-2022-youngserif.jpg\")
\nYoung Serif<\/a> 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.<\/p>\n11. FUNGIS<\/h4>\n
![\"Fungis\"](\"\/uploads\/amazing-font-discoveries-2022-fungis.jpg\")
\nFUNGIS<\/a> 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.<\/p>\n12. Inter Tight<\/h4>\n
![\"Inter](\"\/uploads\/amazing-font-discoveries-2022-intertight.jpg\")
\nInter Tight<\/a> is a specialized version of Inter with tighter spacing, for display usage. This version also has Roman and Italic styles.<\/p>\n13. Mukta<\/h4>\n
![\"Mukta\"](\"\/uploads\/amazing-font-discoveries-2022-mukta.jpg\")
\nMukta<\/a> is a Unicode compliant, versatile, contemporary, humanist, mono-linear typeface family available in seven weights.<\/p>\n14. Anybody<\/h4>\n
![\"Anybody\"](\"\/uploads\/amazing-font-discoveries-2022-anybody.jpg\")
\nAnybody<\/a> is a variable font available in condensed all the way to extended weights.<\/p>\nThank you<\/h4>\n
1. Plus Jakarta Sans<\/h4>\n
![\"Plus](\"\/uploads\/favourite-modern-fonts-2021-plusjakartasans.jpg\")
\nPlus Jakarta Sans<\/a> 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.<\/p>\n2. Noah<\/h4>\n
![\"Noah\"](\"\/uploads\/favourite-modern-fonts-2021-noah.jpg\")
\nNoah<\/a> 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.<\/p>\n3. Spartan<\/h4>\n
![\"Spartan\"](\"\/uploads\/favourite-modern-fonts-2021-spartan.jpg\")
\nSpartan<\/a> is an open-source typeface based on early 20th century American geometric sans serifs. To contribute to development see Github<\/a>.<\/p>\n4. Inter<\/h4>\n
![\"Inter\"](\"\/uploads\/favourite-modern-fonts-2021-inter.jpg\")
\nInter<\/a> 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.<\/p>\n5. Swansea<\/h4>\n
![\"Swansea\"](\"\/uploads\/favourite-modern-fonts-2021-swansea.jpg\")
\nSwansea<\/a> 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.<\/p>\n6. Kumbh Sans<\/h4>\n
![\"Kumbh](\"\/uploads\/favourite-modern-fonts-2021-kumbhsans.jpg\")
\nKumbh Sans<\/a> 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.<\/p>\n7. Satoshi<\/h4>\n
![\"Satoshi\"](\"\/uploads\/favourite-modern-fonts-2021-satoshi.jpg\")
\nSatoshi<\/a> 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.<\/p>\n8. Manrope<\/h4>\n
![\"Manrope\"](\"\/uploads\/favourite-modern-fonts-2021-manrope.jpg\")
\nManrope<\/a> font is free for personal and commercial use. It's open-source and was recently converted to a variable font.<\/p>\n9. Strawford<\/h4>\n
![\"Strawford\"](\"\/uploads\/favourite-modern-fonts-2021-strawford.jpg\")
\nStrawford<\/a> is another great font from Atipo Foundry. You can get it by paying what you want starting from 15EUR.<\/p>\n10. Lexend<\/h4>\n
![\"Lexend\"](\"\/uploads\/favourite-modern-fonts-2021-lexend.jpg\")
\nLexend<\/a> is a variable font made specifically to improve reading-proficiency. To contribute, see lexend.com<\/a>. It has recently made it to Google fonts and there's 7 styles to choose from.<\/p>\nBonus fonts<\/h4>\n
prefers-color-scheme<\/code>. Let's begin.<\/p>\nJavascript<\/h2>\n
html<\/code> tag where theme class will be applied.\nIf the theme is set in localStorage<\/code>, it will set that theme. Otherwise, it will check prefers-color-scheme<\/code> for dark match and set the default theme based on that.<\/p>\nconst html = document.querySelector(\"html\");\nconst theme = window.localStorage.getItem('theme');\n\nif (\"theme\" in localStorage) {\n html.setAttribute('class', theme);\n} else {\n window.matchMedia('(prefers-color-scheme: dark)').matches ? setTheme('dark') : setTheme('light');\n}<\/code><\/pre>\nhtml<\/code> tag and set the value in the localStorage<\/code>.<\/p>\nfunction setTheme(theme) {\n html.setAttribute('class',theme);\n window.localStorage.setItem('theme',theme);\n}<\/code><\/pre>\nprefers-color-scheme<\/code> media feature we mentioned earlier.\nThis is the automatic part that changes theme based on the OS settings.<\/p>\nwindow.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {\n e.matches ? setTheme('dark') : setTheme('light');\n});<\/code><\/pre>\nwindow.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {\n if (\"theme\" in localStorage) {\n html.setAttribute('class', theme);\n } else {\n e.matches ? setTheme('dark') : setTheme('light');\n }\n});<\/code><\/pre>\nhtml<\/code> class attribute and switch the theme accordingly.<\/p>\nfunction handler(evt) {\n evt.preventDefault();\n const currentTheme = html.getAttribute('class');\n const switchTheme = currentTheme === 'light' ? 'dark' : 'light';\n setTheme(switchTheme);\n}\n\ndocument.addEventListener('DOMContentLoaded', function() {\n const button = document.getElementById(\"theme-toggle\");\n button.addEventListener('touchstart', handler);\n button.addEventListener('click', handler);\n});<\/code><\/pre>\nHTML<\/h2>\n
<button class=\"theme-toggle\" id=\"theme-toggle\">\n <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 14 14\">\n <circle class=\"main\" cx=\"7\" cy=\"7\" r=\"5\" \/>\n <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\" \/>\n <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\" \/>\n <g class=\"rays\">\n <path id=\"ray-1\" d=\"M7,2.432l0,-0.932\" \/>\n <path id=\"ray-2\" d=\"M10.209,3.791l0.653,-0.653\" \/>\n <path id=\"ray-3\" d=\"M11.568,7l0.932,-0\" \/>\n <path id=\"ray-4\" d=\"M10.209,10.209l0.653,0.653\" \/>\n <path id=\"ray-5\" d=\"M7,11.568l0,0.932\" \/>\n <path id=\"ray-6\" d=\"M3.791,10.209l-0.653,0.653\" \/>\n <path id=\"ray-7\" d=\"M2.432,7l-0.932,0\" \/>\n <path id=\"ray-8\" d=\"M3.791,3.791l-0.653,-0.653\" \/>\n <\/g>\n <\/svg>\n<\/button><\/code><\/pre>\nSCSS<\/h2>\n
--toggle<\/code> unchanged, because they will blend nicely to their corresponding theme via screen and multiply blend mode.<\/p>\n:root {\n --toggle: #FFFFFF;\n --background: #F8F8F8;\n --text: #282435;\n &.dark {\n --toggle: #000000;\n --background: #1A191F;\n --text: #DDDBE4;\n }\n}\n$fast: .3s;\n$easing: cubic-bezier(0.250, 0.460, 0.450, 0.940);<\/code><\/pre>\nmix-blend-mode<\/code> to the button itself.<\/p>\n.theme-toggle {\n background-color: transparent;\n border: 0;\n padding: 0;\n display: block;\n width: 24px;\n height: 24px;\n cursor: pointer;\n outline: none;\n overflow: hidden;\n position: relative;\n mix-blend-mode: multiply;\n svg { \n position: absolute;\n top: 0;\n right: 0;\n }\n .overlay { \n fill: var(--toggle);\n }\n .main,.shadow {\n stroke: var(--text);\n stroke-width: 1px;\n transition: transform $fast $easing;\n }\n .main {\n transform: scale(0.5);\n stroke-width: 1.6px;\n transform-origin: center center;\n fill: transparent;\n }\n .shadow { \n fill: var(--toggle);\n transform-origin: top right;\n transform: translatex(10px) translatey(-10px);\n }\n .rays path { \n stroke: var(--text);\n stroke-width: 1px;\n stroke-dashoffset: 0;\n stroke-dasharray: 0;\n stroke-linecap: round;\n }\n @for $i from 1 to 9 {\n .rays path:nth-child(#{$i}) { transition-delay: $i * 0.03s; }\n }\n}\n\n.dark {\n .theme-toggle {\n mix-blend-mode: screen;\n .main {\n transform: scale(1);\n stroke-width: 1px;\n }\n .shadow {\n transform: translatex(0) translatey(0);\n }\n .rays path { \n stroke-width: 0px;\n stroke-dashoffset: 2;\n stroke-dasharray: 2;\n transition: all $fast $easing;\n }\n }\n}<\/code><\/pre>\nFinal notes<\/h4>\n
Design<\/h2>\n
Development<\/h2>\n
Eww, PHP?<\/h3>\n
Next steps<\/h4>\n