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.

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.

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.

Self-Hosted vs. Subscription-Based Fonts

After tweeting my blog post on why I am moving off Adobe Fonts, a designer friend asked me to share the pros and cons of self-hosted vs. subscription-based fonts. Since I started off using subscription services and made the transition to self-host on all my sites, which include this blog, my portfolio, Professional Web Typography, and Vietnamese Typography, I would like share my experience.

When web fonts first took off, subscription-based method seemed like an easier and a more convenience choice. I just needed to add one line of markup to my site and a third-party hosting took care of the rest. Services like Google Fonts and Adobe Fonts have done a great job of optimizing their font files, keeping them up-to-date, and making sure they work on different browsers. Furthermore, they separated their fonts into different subsets to keep the file size small. For instance, I don’t need to load subsets with Vietnamese diacritics if my site only used English. In Adobe Fonts, I can choose specific OpenType features. The more features I use, the larger the file size. The biggest advantage of using a subscription service is that I have instant access to thousands of fonts, although only a handful with Vietnamese support.

The disadvantage of using a subscription service is the dependency. Google, so far, is reliable, but no one knows how it is going change in the future, giving Google’s history of abandoning projects. Since Google Fonts only hosts open-source fonts, I have the choice to host them myself, which I will be doing for Vietnamese Typography in the near future. As for Adobe Fonts, they have already discontinued Typekit standalone plans. I can sign up for InCopy, which is $4.99 a month, but what is the point of getting something that I am not going to use? I already have all Adobe programs through my work; therefore, I don’t need additional copies for myself. I just want to keep my Adobe Fonts account separate. What if Adobe decided to sunset InCopy or raise the price in the future? I would be screwed again. I featured many typefaces from Adobe Fonts on Vietnamese Typography and all of them will break if the subscription changed. I have no plan of taking Vietnamese Typography offline; therefore, I need to make sure all fonts will continue to work decades from now. That is one of the main reasons I decided to host the fonts on my site.

Self-hosting method takes a bit more work, especially in the early days of web fonts. Browsers didn’t render fonts consistently. CSS font support was not reliable. In recent years, browsers are getting better and CSS has font display property to control how fonts are rendered; therefore, hosting fonts on my own site is getting easier and more reliable. The only disadvantage is that I have to write a bit more CSS and keep the font files up-to-date.

With self-hosting method, I am limited to the fonts that I have. Whereas subscription gives me far more choices. Then again, I am fine with working with a handful of typefaces than thousands to browse through. It comes down to renting versus licensing. I prefer the licensing model.

Moving Off Adobe Fonts

For the longevity of Vietnamese Typography, I have decided to move away from subscription-based service and host all fonts locally. As of today, my book website is no longer depending on Adobe Fonts. I have removed all fonts that have been served via Typekit, especially in the “Type Recommendations” section.

I am reaching out directly to the source to allow me to host the font files (WOFF2) on my site. Many thanks to the following type designers and foundries for providing me with copies of their web fonts: Darden Studio, Kilotype, Huerta Tipográfica, David Jonathan Ross, and Juanjo López.

While updating the site, I also went through and copyedited all the pages. This is what I love about using the web as a platform. I can continue to update and improve without having to reprint everything. My next step is to move off Google Fonts as well. I would like to keep this book online as long as I can. If I need to pass it off, I would like all fonts to continue to work. Moving off Adobe forced me to abandon some quality typefaces, but it is better for the long run. Jeremy Keith has been my inspiration for keeping an archive of my projects on my own site and not relying on a third party.

I will continue to acquire Vietnamese fonts when I have the resource. If you have Vietnamese-supported typefaces and would like to feature on my site, please get in touch.