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.

The Design Blockers

In the past, I worked directly with the client. For any design project, I would come up with the best solution to present to the client. I would make the change if the client’s feedback is valid or I would explain to the client the reason behind my decision. The approach was effective and time-saving.

Recently I was asked by a freelancer to update a header. It was supposed to be a quick job since I just needed to update the photo. It turned out that the freelancer sent it to the director. The director emailed back to the freelancer asking me to come up with several more designs to give the client a few choices to pick from. I understand that the director is new and desperate to please the client. I was not going to provide any additional versions, but it was a quick job and didn’t want to be seemed as difficult to work with. As a result, I did another version.

The freelancer came back to me and told me that the director wanted a few more variations of the second version in Arial and in different fonts. At this point, I had no choice, but to straighten them out. My job as a designer is to provide my client the best choice possible and then go from there. Asking me to substitute Arial for a branded typeface, which is Myriad Pro, is not helping. If my client has to choose between Arial and Myriad Pro, what is my role for? That is the type of decision I should be making instead of my client. If the client can choose between one over the other than the client doesn’t need my design expertise.

It doesn’t make any sense to go through people who do not make the decision before getting the feedback from the decision maker. It is such a waste of time and resource to go through the middle people. They are not designer and their mission to to please the client instead of helping the client to make the best decision. I can’t deal with the design blockers.

Swash Cap

In his second issue of “Web Fonts & Typography News,” an excellent weekly newsletter, Jason Pamental shares some tips on creating a drop cap on the web. As demonstrated in Jason’s technique, making a drop cap with the first-letter property requires some finessing until the initial-letter property is supported in major browsers.

In the latest iteration of this blog, I wanted to create a drop cap, but ended up with a swash cap instead. As you can see, the first letter in the opening paragraph of each blog post is a bit fancier than the rest. Pliego, designed by Juanjo López, has some beautiful OpenType features including swashes and stylistic alternatives. To activate them, I simply need one of CSS:

p:first-of-type:first-letter {font-feature-settings:"swsh","salt";}

The initial letter is subtle, but does add a nice touch to the text.