Mapping Corruption

Since becoming president, Trump has brought his brand of corruption to every federal government agency and it is hard for us to keep track of it all. In the cover story of the March/April 2020 issue of The American Prospect, Jim Lardner unlocks extensive dossiers of the activities happening inside 15 federal departments.

Last week, the magazine contracted me to create an online version of the story. After discussing with its creative director who was my advisor for my final thesis on Vietnamese Typography, I developed an interactive page based on a map illustrated by Peter and Maria Hoey. My initial impression was that I might have to create an image map, which I used to despise and hadn’t have to create one in years. Thankfully, I was able to export the illustration into an SVG, which allowed me access individual shapes of the building to create links and hover state. When users hover each department, the building moves a bit and turns dark. Another requirement was to have the dollar signs flying across the map to show corruptions.

The project turned out well. The illustration is beautiful and the dossiers are informative. I invite you to check out “Mapping Corruption: The Interactive Exhibit.”

Visualgui 2020 Iteration 2: Re-typesetting

For the second iteration of Visual 2020 theme, I reset the typefaces. Main text is anchored in Exchange, by Tobias Frere-Jones. I played a small role in providing Frere-Jones my feedback on Vietnamese diacritics before this typeface released. Headings are set in Bild, by David Jonathan Ross. Bild’s variable font comes in handy for setting various level of headings. For the title of each article, I am making it big. Code excerpt and category are set in Input Mono, also by DJR. I also changed the background color. I went down the rabbit hole a bit on COLOURlovers and I needed to stop. This iteration is not a big departure, but a change to keep the site fresh. These days I don’t do a whole redesign, but small changes here and there. I hope you enjoy this little update until iteration 3. I am not sure when that will be, but pretty sure in three to six months depending on what typefaces I wanted to try out next.

Website for Bố

In 2012, my wife asked me to create a tribute website for her father after he passed away. I stood up WordPress and created a child theme based on Twenty Twelve, which was WordPress’s default theme at the time. WordPress was quick for me to set up and easy for her to add content. Except for his biography, she put together photos, videos, and letters from family members and friends.

Since then she hadn’t updated the site. She doesn’t need to. It is a special little site to keep all the wonderful memories of him. I could have left the site as it was, but I felt WordPress was not necessary. Even though I had automatic upgrade turned on, maintaining WordPress was not ideal. In addition, the Twenty Twelve theme seemed outdated.

I had wanted to redesign the site from scratch and to remove WordPress for a while. I finally found the motivation and the time last week to do it. I recreated the pages using HTML, CSS, and a bit of PHP. The new design is fresh and no longer driven by templates. It felt great getting rid of WordPress altogether.

Redesigning the site feels as if I have paid proper tribute to my father-in-law. I wish I could share the website, but I respect my wife and her family’s privacy.

Rest In Peace, Bố.

Updating Đẹp Designs

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.

I made the suggestion that I can handle the update for them since they don’t seem to add new content too often. Because I would be doing the updating, Kirby is no longer needed. They would not have to worry about upgrading Kirby CMS. In my proposal, I offered to move the site off Kirby and rebuild it using PHP, audit the entire website, perform house cleaning to fix bugs, bring the codes (HTML, CSS, JavaScript) up to date, add an SSL Certificate, and updated from PHP 5.4 to PHP 7.3.

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.

Speaking of personal blog, I am glad to see designers leaving Medium and starting their own blog again. Hylia seems like a promising starter kit to get blogging. Unfortunately I have no idea how to use it. I am still running on the good ole solid WordPress. I trying to keep it as simple as possible. No comments. No Webmentions. No trackbacks. No photos. No tracking. No JavaScript. None. I don’t care if people are linking back here anymore. My subject matters are highly personal. There’s no added value for no one else but myself. Let’s keep it that way.

Off topic a bit, but I added three typefaces from TypeTogether to Vietnamese Typography. Check out Adelle Sans, Bree, and Ebony.