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.