Updating on Design

I just jazzed up my professional portfolio website with variable fonts. Both Bild and Roslindale are designed by David Jonathan Ross and they are available at Font of the Month Club for discount prices.

I wanted to create a block of text and variable fonts make it easy to experiment in CSS. These days I design webpages exclusive in the browser. I keep playing around with different layouts and typefaces until I get the right feel for the design. That was how I came up with the design for Trịnh Công Sơn’s lyrics.

Designing with static comps, which I did for Thinkpoint, was a huge challenge. Even though the designer had given me the flexibility to design the way I saw fit, it was still difficult.

An old client has asked me to develop custom WordPress themes, but I turned her down. I have giving up on WordPress theming. Gutenberg had lost me. I can’t find any tutorial in which I can develop a theme from scratch. I would need to take a starter theme and run with it. The goal of Gutenberg is to make layout richer, but I see so much templated WordPress theme with a heavy baggage on performance. I still see lots of WordPress themes with common look and feel like full-screen photos, tiny text, boxes, gallery and so on.

I turned off the classic editor and switched to Gutenberg for this blog. It works fine. I just don’t have any block. That’s fine. I still want this site to remain as a blog and nothing fancy. I don’t care about rich content and photography. All I care about is typography. I want the editor to remain as simple as possible. It appears that Gutenberg has improved with the release of 5.2. As long as everything works as I expected, I am fine with using WordPress as it was intended for blogging. I hope that WordPress won’t abandon that.

Some Enhancements

Just wanted to jazz up this blog a bit with some small enhancements.

Added a dark mode switcher, which locates at the top right corner of the blog. The simple instruction is taken from Flavio Copes’s “How I added Dark Mode to my website.”

On the desktop layout, I am setting the body text to justify and using hyphens. I decided to give it a shot after reading Richard Rutter’s “All you need to know about hyphenation in CSS.”

I also added a bit of an embellishment to the end of each article after reading Jason Pamental’s “Of marks, ends, and middles: end marks, sections, and dead ends.”

I love these kind of tutorials on the web. They give me a chance to play around with this blog.

Vietnamese Typography Exhibition

When Linh Dương, a graphic design student, asked my permission to use part of Vietnamese Typography for her final project, of course I said yes. She wrote:

I am an admirer of your work “Vietnamese Typography”. It has to be the most extensive, well-written and structured work into the Vietnamese language that I have known.

Hearing this from a Vietnamese designer made my day. I am glad that this book had reached student designers who are interested in Vietnamese typography. The book, which takes advantage of the web as a medium, made this possible.

Yesterday, Linh sent me some screenshots of her final products, which will be displayed at the end-of-the-year exhibition. They look lovely.

How to Customize a Typeface into a Logo

James Edmondson shares:

While logotypes can be simply typeset, it often makes sense to put another level of care and attention into how letters exist within their unchanging context. Type design is a compromise. Decisions are made about the structure of a drawing to excel best in the greatest possible number of contexts. This changes a lot for logotypes. When words are drawn as a single image, opportunities arise to get a little more own-able, without worrying about the letters jumbling up again.

Useful tips and examples.

Skill Assessments

My current title at Scalia Law School is Director of Design and Web Services. I supervise a part-time employee who helps me out with updating content, managing MODX and WordPress, and putting together HTML newsletters. As for my role, I am still involved hands-on with design and development.

For design, I am still kicking ass in Illustrator, Photoshop, and typography—I wrote two books on it. I still work with the Dean’s office, admissions, alumni, and various centers to design print materials ranging from magazine ads to invitations to conference’s programs.

For the web, I am still kicking ass in HTML and CSS. I design in the browser and have not touched Sketch, Figma, InVision, or any UX tool. I write a bit of JavaScript and PHP. I can develop sites with content management system including MODX, WordPress, and Kirby. I have not touched any design or JavaScript frameworks.

I am not in the market to look for a new job, but I wonder if my skillsets will still be useful. My current director role isn’t conventional because most design and creative directors aren’t hands-on. By keeping my hands in the technical side, I understand exactly what designers and developers are doing. I know about performance, accessibility and usability.

Vietnamese Typography is Completely Self-Host

My book, Vietnamese Typography, is now completely self-hosting all the fonts. I wrote about moving off Adobe Fonts a couple of weeks ago. In the past two days, I moved off Google Fonts as well. I also wrote about self-hosted vs. subscription-based fonts. I am going for the self-host approach as much as I can.

Yesterday, I received both Skolar and Skolar Sans from Rosetta. Thanks David Březina. While making the update, I redesigned the recommendation section to better showcasing the typefaces with Vietnamese lyrics from Trịnh Công Sơn. I am very with the selection I am featuring and I will continue to add more in the future. I also gave a shoutout to the type foundries and designers who have provided me their font files.

Learn HTML & CSS for Designers

Meagan Fisher shares her own experience of why and how she learned to code:

My absolute favorite thing about writing code — and the reason I stuck with it through the initial learning curve— is that there is pretty much always a right answer when it comes to code. Your code either works or it doesn’t. This is not the case with almost anything else in life. When you write an essay, paint a picture, or design a website, you never really know if you did it “right.”

With code, there is a solution. You want to replicate the little boxes you drew in Sketch in your browser? There is a concrete set of words you can type in your text editor to do that.

This is a great advice for beginners.

Moving From WordPress to Kirby for Client Websites

This blog still runs on WordPress. It’s a theme I have designed and developed years ago in B2, which was the father of WordPress. I coded the theme from scratch using only PHP hooks specifically for my blog. Even to this day, my theme has three files: index.php, style.css, screenshot.png.

These days WordPress has become way too complex to start from scratch. I can still take a starter theme like Gutenberg and go from there, but it already packed too many things I don’t need. I prefer to have control of WordPress instead of the other way around. I want to know exactly how my HTML ended up in the browser. I tried not to sweat it and just lived with whatever an existing theme spits out, but it just feels wrong.

I would love to learn how to make a WordPress theme from scratch using the Gutenberg’s blocks. I have not found any tutorial like that. If you do, please let me know.

Because WordPress has lost me, I can no longer develop clients’ website with it. I turn to Kirky instead. Kirby is not free, but it is worthwhile paying for. Kirby allows me to stand up a site quickly and doesn’t get into the way I design the website. Every piece of HTML is rendered exactly the way I have coded. The best part is that the panel knows which piece can be updated by content editors. As a result, Kirby is an ideal CMS for a small websites.

Lacking of Diversity at AEA

A few weeks ago after failing to search for upcoming design or typography conferences in the DC metro area, I asked Twitter for help. An Event Apart was recommended and I already knew about AEA in DC, but I was not planning on attending.

I went to AEA once about five years ago and I have tremendous respect for the organizers, but it has not changed much except the price. The three-day pass is $1,500. Although my work would cover the cost, it is still expensive. While most of my colleagues attended conferences cost around $500, here I am requesting a conference for triple the price.

My primary reason for not wanting to attend is the lack of new and diverse speakers. AEA has done a great job of adding many women speakers to the roster, but the line up for DC as of today is lacking minority representation. Furthermore, most of the speakers are within a small circle. They are fantastic, but I would love to see different voices.