A few months ago, I met up with one of the founder of Đẹp Designs over coffee. I casually pointed out to him that the images were heavy (about 2.5 mb a photo) and the dimensions were off. He told me that after I handed over the key and trained one of his employees to update the website, the employee had moved on.
When I relaunched Đẹp Designs two years ago, I gave specific instructions on the dimensions and optimizations in Photoshop. All that they needed to do was creating the images and upload them to the server. Kirby CMS will handle the rest. Unfortunately the images were huge and the sizes varied.
After they agreed, I spent some of my Thanksgiving break reworking the site. Take a look.
Visualgui 2020 Iteration 1: Fine-tuning
Visualgui 2020 is not a new departure, but more of a fine-tuning from Visualgui 2019 Iteration 6. I am still obsessed with the book-reading experience with just one-column text on muted background color.
The biggest change is the typeface. The main text is now set in Fragen, by Lucas Descroix. I really love this new slab text face. Furthermore, I had the opportunity to work with Descroix on Fragen’s Vietnamese diacritics. I am mot using a sans-serif complementary in this version.
I am also bringing back the huge display text on the homepage. Currently I am using Roslindale Ultra by DJR. It’s pretty much it.
Visualgui 2019 Iteration 6: Reading Experience
As a voracious reader of physical books, I wanted to turn this blog into a book reading experience. The background color was chosen to mimic the paper. I also limited the color to mute. No more red links. Even the logo is more subtle.
For the typeface, I am setting the main text in Schotis, designed by Juanjo López and inspired by Scotch Romans. López writes, “The Scotch Romans are a strange case in the history of typography. Although they were one of the most used letters during the 19th and early 20th century, they don’t have their own place in the main typographical classifications.”
For small text, I turned to Adelle Sans, designed by Veronika Burian and José Scaglione. I like the way Schotis and Adelle Sans complements each other. For code excerpt, I am sticking with Input Mono, by DJR.
After using big text in the previous iteration, which did not even last a month, I kind of like the quietness of this version. Hopefully, it will last until next year before I switch it up again. It always nice to have a personal website to experiment with typography and to hone my development skills.
Visualgui 2019 Iteration 5: The Return
Iteration 5 of this blog returns to one-column layout. The three-column grid in the previous iteration was getting too busy for me. Too many sidebars; therefore, I wanted to strip back to just the blog posts. All additional information is pushed to the bottom.
This iteration also returns to open-source typefaces: Crimson Pro and Livvic. Both designed by Jacques Le Bailly.
The hero text on the homepage feeds in from Merriam-Webster’s Word of the Day and typeset in Font of the Month Club. I have been visiting my own site and learn a new word a day. A little narcissistic, I guess.
Professional Web Typography: Second Edition
I’ve just launched the second edition of Professional Web Typography. In addition to updating, revising, reorganizing the materials, I redesigned the website and reworked all the demos.
The second edition is still available for free online and relying on readers’ support. When they make a $10 contribution, they will get to download the source code to all the demos used in the book. The source code is just a little bonus to show my appreciation. I set the price this time because I don’t want to receive anymore penny donations. Ten bucks seems like a fair price for the book considering the time and efforts went into revising the content and creating the demos.
As I was rewriting and redesigning this book, I considered putting the second edition on Amazon Kindle to see how well it will do. I downloaded Kindle Create and started to play with it. Unfortunately, I found it to be too restrictive. I can only use three typefaces and JPG image format. It is probably fine for a novel or a nonfiction, but not at all for a book on web typography. I gave up and went back to the web where I have much more choices and control of my typography.
For the website, I used all typefaces designed by David Jonathan Ross. The main text is Turnip. Big heading is Forma DJR Chiaroscuro. UI element and small text are Input Sans. Code excerpt is Input Mono.
I hope you will enjoy reading it.
Redesigned My Portfolio Site
My portfolio site gets a redesign again. The focus is still on simplicity and typography. The main typeface is Exchange, by Frere-Jones Type. Even though Exchange is an excellent text face, it also looks gorgeous at large size. Headers are set in Bild by DJR. I dig the latest version David sent out last May to the Font of the Month Club members. The new version of Bild comes with variable font.
For the design, I wanted to keep it as simple as possible. The homepage is just text leading into my professional projects. The about information now has its own page. I also added a about and book page to highlight my books.
In the past, I wanted to keep my résumé independent of the site, but with the redesign, I brought it into the layout as well. I also got tired of maintain a print and an online version; therefore, my résumé is now designed in HTML and CSS first then exported out as a PDF for print.
I hope this latest redesign will last for a while before I feel the itch to change it again.
Visualgui 2019 Iteration 4
After launching the third iteration of Visualgui 2019 a couple weeks ago, I already switched out to different font. As much as I liked IBM Plex Sans Variable, it quickly became too much like IBM; therefore, I switched to Literata. Then I added Halyard for small text. Then changed up the headlines with Gimlet Banner. Then ended up switched the main text to Pliego. I like to play around with more typefaces than just using one; therefore, variable font might not necessary work for me. Since this is my personal blog, I get to experiment with it quite a bit.
Off topic a bit, but I added three typefaces from TypeTogether to Vietnamese Typography. Check out Adelle Sans, Bree, and Ebony.
Visualgui 2019 Iteration 3: Plexibility
Even though I am on vacation with my family this week, I felt the urge to redesign this blog. Despite all-day activities including biking, arcading, babysitting, and swimming, I stayed up into the wee hours to work on this blog after the kids passed out.
For this version, I wanted to experiment with variable font using one typeface for everything. I also would like to return to a modern design with type and grid. I started off with Adapter Variable by Rosetta Type. AV is an excellent type system that can handle expressive heading to readable text within one file. I highly recommend AV for commercial sites, but I can’t afford 690 € ($780) for my personal blog. As a result, I had to find an alternative variable font with Vietnamese support. I chose IBM Plex Sans Variable, designed by Mike Abbink and in collaboration with Bold Monday, because I had already used its sibling Plex Mono for code highlighting in the previous version of this site.
After some readjustments from Adapter to Plex, I loved the new typesetting just as much. The only minor drawback is that Plex Sans Variable has a separate file for roman and italics instead of combining into one. On the plus side, Plex Sans works out well with Plex Mono. For the mobile version, I set the width of the text narrower to accommodate more words. For large screens, I set the width a bit wider. For headers, I narrow the width and the bold the weight.
I also kept the dark mode from the previous version. If you are reading this post through an RSS reader, please visit the site to see the new design.
Typesetting Trịnh Công Sơn’s Lyrics
It is no secret that I am a huge fan of Trịnh Công Sơn’s music. Every time I listened to any of his song, I would find a line or two that spoke to me. For a long time, I wanted to collect all of his songs with inspirational quotes on love, life, and death. In the past couple of weeks, I made that my side project.
I went through 244 songs and picked out 158. I left out songs with war-related lyrics. I put all 158 songs into one HTML file and pulled out quotes that I loved. After that I designed the page with HTML and CSS. My challenge was to pack as much text into a page. My goal was to create a newspaper design for the web.
At first I used CSS grid, but I could not get the songs to stack up against each other like the Masonry layout. Then I switched to CSS Flexbox so that I could fill as many columns as I could on big screen monitors. Still Flexbox didn’t solve the issue of blank spaces between the rows. My last resort was CSS Multi-column. Although Multi-column solved the gap-row issue, it would break up the text in the middle of each song. Fortunately,
break-inside: avoid; did the trick.
My intention for this project was that readers would skim the big pull quotes. Once they find something that they like, they can stop and read the entire lyrics.
To make the design more exciting, I dialed up the typography quite a bit. As a member of the Font of the Month Club, I have access to all the playful fonts designed by David Jonathan Ross; therefore, I might as well put them to use. The body text is anchored in Fern, one of my favorite reading text faces. The title of each song is set in Dattilo DJR. The quotes are set in various fun faces. They are loaded in random with a jQuery script written by Ngô Thiên Bảo. I also added in a dark mode switcher and the ability to turn off the pull quotes to make the layout less busy.
Initially this project was created for myself, but it also showcases Vietnamese fonts. As a result, I put it on Vietnamese Typography. Even if you don’t understand Vietnamese, you still can enjoy the beautiful typography. Take a look.
With the birth of my three older sons, I created a short slideshow dedicated to each of them. I used Flash to put together a short clip that had photos within the first three months of their lives. Although Flash player was no longer in used, I converted the clip to video. Here are clips for Đạo’s, Đan’s, and Xuân’s.
By the time Vương was born, Flash had already gone. Now that I use Creative Cloud, I no longer have access to Flash. I was not planning on creating one for Vương, but his mom said it wouldn’t be fair for him. So I needed to create one for him as well. My next choice was After Effects since I now have access to it. I experimented with AE for a bit and it seemed that I could do the Ken Burn effects similar to Flash, but it will take me so much time to get around AE. I would love to learn AE in the near future, but not for this project.
My next choice is CSS animation. I was not sure if it could be done, but I would love to create a slideshow using the web. After a few googling, I came across a CSS Gallery by Ana Travas. The animations Ana is using to create the Ken Burn effects is from Animista, which I really loved.
With the basic demo, I put together a web-based slideshow for our youngest Vương. All I needed to do was added music to it. I selected Nat King Cole’s “Smile” because Vương smiles a lot. The tune, which performed by Halie Loren, is not about happy smiling, but more like smiling even through sadness. I wanted Vương to continue to smile even when life is hard. I am very pleased with the final product. Take a look.