With the ending of standalone Typekit plans, I am beginning to move my sites off Adobe Fonts. Professional Web Typography is now set in the Source family, which includes Source Serif, by Frank Grießhammer, as well as Source Sans and Source Code by Paul D. Hunt. I am also using variable fonts for the serif and the sans.
Here’s a colorful design for 2019. Each blog post is now separated by a vibrant color to spice up the layout. I wanted to move away from black text and red link on white background.
Of course the typography is completely changed. Body text is now set in Fern, by David Jonathan Ross. The big headlines are set in Dattilo, a stylish revival of the classic Italian slab by David Jonathan Ross with Roger Black. Dattilo is fresh off Font of the Month Club last night. Small text is set in Frequenz, by Sebastian Losch.
My personal goal is to give this blog at least one redesign a each. For 2018, however, I had gone through six different iterations. I am sure I will do the same for 2019.
As for WordPress, I am not sure how the release of version 5.0 and Gutenberg will change the way I have been theming this blog. I am still using the minimal requirements (index.php and style.css); therefore, the new editor, which allows users to create rich experience, does not fit my need. The minimal theming allows me to hone into the text and make the redesign quickly. I don’t have to comb through 100 files. My focus is still typography rather than image-driven design.
I hope you enjoy the new design.
I have created a new page for my boys called “Tứ Quý” (Four of a Kind). I am using DJR’s Bradley for the header and Source Sans and Serif family for the text. The page is created simply for me to remember their birthdays when I take them to the doctor.
I also redesigned Donny Trương homepage with a photo of Xuân and me. Although it’s my professional website, I wanted to add a personal touch to it. Xuân definitely steals the picture, but it is the best photo of me that I have found.
That’s it. Have a good weekend. I can’t believe Thanksgiving is coming up.
If you are reading this on an RSS reader, go ahead and type visualgui.com on your browser. I made further changes to the site in the past weeks. The logo is now blown up and rotated on the homepage. I just wanted something dynamic and impactful. I am also considering bringing back the masking effect on the logo. I just don’t know what to promote yet.
For the body text, I am switching from Halyard, designed by Joshua Darden, to Minion 3, designed by Robert Slimbach. I am so old school that I prefer serif type for reading over sans. I knew that a sans serif body copy wouldn’t last too long. In addition, I have been wanting to use Minion 3 since it has been updated and expanded. I still dig Halyard, especially for display. I am going for the extra big and bold on the title of each blog. The bigger the screen, the bigger the headline. It is quite extreme, but I love it. It’s my damn blog after all.
I must admit that I am quite narcissistic when it comes to my blog. I look at it more than I look myself in the mirror. It is getting compulsive. The more I look, the more I want to change. I have gone through small iterations throughout the year rather than a big change once a year because I keep wanting to experiment.
This blog has become such an integral part of my life both personal and professional. It gives me the space not just to write, but to practice my web design skills. I work with PHP, HTML, CSS, and, of course, fonts almost everyday.
Blogging and blog design might have die for most people, but for me, it is still a fantastic space to put all of my life and my passion into one place. I do not trust Medium, which shut down the ability to have a custom domain, with my content. Although Alex Jones and his Infowars empire deserved to be kicked off social media platforms for spreading hates, I do not trust social media with my content either. Just without a few weeks, the only place on the Internet Jones has left is his own website.
I am now investing more and more on my site rather than elsewhere. It is my own thing. I don’t know who reads what I write anymore, but that doesn’t stop me. My goal is still to make money off blogging one day. For almost 20 years, I have not figured out how because I have no business skill whatsoever, but I still want to think about it. Maybe one day when I no longer have a full-time job. For now, I just keep working on that goal.
In less than five months, I am already itching for a new design. Iteration 5 is all about sans serif. I often go with a serif face for body text, but I am switching it up a bit this time. Halyard, designed by Joshua Darden, has been on my mind for a while so here’s a chance to use it. The wordmark remains the same. As for the layout, I am going for four columns on large screen. CSS Grid makes layout design a joy. I hope you’ll like the new direction.
Completely redesigned, revised, and expanded, the second edition of Vietnamese Typography takes on a bolder visual direction to provide more useful information, supply more illustrations, and feature new typefaces. For the new design, I wanted to turn the website into a rich browsing experience that is similar to a coffee table–worthy book.
The page is structured in a four-column fluid layout using CSS Grid. It is fully responsive from small devices to large screens without limiting the width of the browser. The columns changes from one to two-two to one-three depending how large the screen it. The larger the screen, the larger the illustrations. The size of the body text remains constant.
The text face is set in Fern, designed by David Jonathan Ross for reading text on the screen. I loved Fern the first time I spotted it on his sample page. When I was thinking a typeface for the second edition of this book, I immediately thought of Fern, but it did not support Vietnamese. I reached out to David to see if he would like to expand it some time in the future. Shortly after our exchange, David began to work on it. The first draft he sent me, I thought I have received a special gift. I went through every single diacritical mark and provided him my feedback. He nailed it on the second draft. I am so happy to have played a role in this elegant, grace typeface.
In addition to Fern, I used Roslindale, also by David, for headers. Subheads and captions are set in Retina, designed by Tobias Frere-Jones. I added Exchange, also by Tobias, for the quotes. Besides these four typefaces, I included 40 more typefaces throughout the site. Needless to say, I wanted to have as many typefaces as possible. This is the opposite approach of my conservative view web typography: Only use what you need.
In this new edition, I did not enlist any editors. My friends were already generous enough with their time helping me out with the first edition; therefore, I don’t want to ask for anymore of their precious time. I would have loved to hire an editor, but I did not get enough financial support from the first edition.
For the second edition, I thought of putting it behind the paywall or just release the print edition, but I still love the open web. I have invested tremendous time and energy into the second edition and my hope for the return of investment is still slim. Again, if you find this book useful, please consider supporting the effort.
The typography on Scalia Law School website has been swapped from Myriad Pro to Pelago. The primary reason is readability.
Myriad Pro is a classic workhorse typeface designed by Carol Twombly and Robert Slimbach. Pelago is a newer typeface designed by Robert Slimbach. Although Pelago has a much smaller family than Myriad Pro, its open counter makes better readability for online text. Its letterforms are less geometric and more natural for reading than Myriad Pro. Its numbers are also more legible.
We still keep Myriad Pro for big headlines, but the body text is Pelago. Because the typefaces are so similar, we made the swap without changing anything in the CSS. I am not sure if casual readers would notice the change, but it looks refreshing.
In less than two months of the recent redesign, I am releasing the forth iteration of this blog. Most elements, including the logo, the typefaces, and the brand colors, stay the same. The drastic different is the new grid layout. I am still experimenting with CSS Grid. Mad kudos to Jen Simmons (I can’t wait to see her new site), Rachel Andrew , and Chen Hui Jing for paving the way for making web layout with grids.
For colors, I am playing around with some random, subtle colors to jazz the design up a bit. Hit refresh and you’ll see a different color background. I’ll add more in the future.
In the previous iteration, I liked the masking effect I did with the logo, but it felt steal after a while, especially when I didn’t have things that I really liked to promote. As a result, I just want to get back to the constant logo.
As for WordPress, it works the way I wanted for this blog. I deliberately keep the theme bare bone so I can make quick changes whenever I wanted to. I spent a couple of hours last night whipping up this theme. I hope that the Gutenberg project, which will be implemented into WordPress core in the future, won’t affect my design. Here’s yet another intriguing Gutenberg critic.
In the footer of this blog, I brought back a blogroll to sites I still read. I hope to see more people writing on their own site instead on Facebook, Twitter, Medium, or third-party platforms. My Feedly has lots more subscriptions, but I only link to blogs that are updated frequently. I hope to add more from time to time.
Also in the footer, I added a support column. After listening to how John Gruber and Jason Kottke got their readers to support their blogs, I wanted to give it a shot. I am not doing any display ad, membership, or sponsorship. If you enjoy reading this blog, just show me some love. Buy me a cup of coffee or a bottle of Don Julio to help fuel my thoughts. You can contribute in any amount. Someday I might follow their footstep and do this full time. For now blogging is still my hobby and I am still very passionate about it.
The new iLoveNgocLan.com has shipped. It needed a fresh look as well as cleaner and leaner codes. I took out a handful of divs in the markup and rewrote all the CSS.
For the homepage header, I wanted to pair up typography with photography. I returned to one if my favorite display typefaces Memoriam by Patrick Griffin. Its elegant curves and swaying rhythms are a perfect match for Ngọc Lan’s styles. The name of the typeface also fits well with the purpose of the site: remembering one of the beloved Vietnamese singers.
For the text face, I wanted to switch it up a bit. I went with Nunito Sans, which is based on Nunito by Vernon Adams. Jacques Le Bailly has done a phenomenal job of extending the typeface to a full set of weights. Nunito Sans is not only clean and beautiful, but also supports the Vietnamese language. The best part is that Nunito Sans is an open source typeface.
Furthermore, I had incorporated some subtle animations into the banners and wordmark. The site is still powered by WordPress. I hope Ngọc Lan’s fans will enjoy the new design.
Iteration 3 of Visualgui 2018 is here to celebrate Vietnamese New Year. I started iteration 2, but decided to skip it. For this update, I made the logo bigger—much bigger. Fit, designed by David Jonathan Ross, works much better at a large size. Since this is a blog and a personal playground, I am not too worried about it being over the top. To beef up the design, I turned the logo into a graphical element, particularly on the homepage. I want to bring some soul into my blog.
I changed the headings from Tenez, designed by Rodrigo Saiani, to Rhododendron, designed by David Jonathan Ross. Although I still love Tenez, I could not resist Rhododendron’s bold and fun characters—the double-story g in particular. Of course, Rhododendron comes with Vietnamese diacritics. You can get Rhododendron by joining the Font of the Month. It has been so much fun receiving these beautiful display typefaces on the first day of each month. I can’t believe it will be a year in April. I hope David will continue this fun project.
The text face is still Ten Oldstyle, designed by Robert Slimbach. In iteration 2, I switched the body text to Pelago, also designed by Slimbach, but I just can’t use a sans serif typeface for reading text. I am still old school like that. Pelago, however, is still being used for small texts. It works really well as an UI typeface.
CSS Grid is still lots of fun to play with. Making web layout is such a joyful these days. I don’t have to wrestle with floats and all that jazz. That’s it for now, but I am sure I will make changes in the couple of months. Every time I do this, I remember Zeldman in the early late 90s and early 2000s. These days, designers don’t do redesign their own sites as much any more because of the increasing complexity of web design. It doesn’t have to be.