Visualgui 2022: Forma DJR

Welcome to the 2022 rendition of Visualgui. If you’re reading this from your favorite RSS reader, you might want to hop over to your favorite browser to see the new change. As a tradition, I try to do a major redesign of this blog for each year then I would follow up with several iterations throughout the year.

For 2022, the major change is typography. In the past few years, I had always drawn to a serif text face for reading content, but I am switching it up for this redesign. Forma DJR, designed by David Jonathan Ross, is not a new typeface, but it was recently updated with Vietnamese support. I am proud to have played a small part in it. When David sent me the test fonts to review, he was not sure if the straight horns (ư and ơ) were too unconventional for reading. I assured him that they weren’t getting in the way and I alway appreciated when designers like David pushed the tradition. I have no trouble reading Vietnamese texts set in Forma DJR.

In addition to language support, David turned the Forma DJR family into variable fonts, which offered so much flexibility for a typographic system. I love the ability to play with font weights and optical sizes with just a few lines of CSS and see the immediate results in a browser. I can set large headlines, body copy, and small text from just one variable font. Variable font is not only convenient, but also a huge time saver. If I have the option between static and variable, I would go for the latter every time.

For the layout, I wanted to bring back the sidebar. A blog isn’t a blog without its sidebar companion. For large screens, I wanted to fill up as much space as possible; therefore, I brought back not one but two sidebars. CSS Grid makes responsive grid-based layouts fast and easy and this redesign gave me the opportunity to implement it. Even though the grid system was drawn from print, CSS Grid is native to the web. I could change from one to two to three columns depending on the screen size.

Finally, I got tired of gray text on white background for light mode and white text on black background for dark mode. I wanted to bring in a different color. I don’t even know the name of the color I am using for this new design. I pulled it from a text file that contained a list of my favorite colors in hex values I had found and saved in the early 90s. Back then websites were much more colorful than now.

I hope you like the new design.