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.

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.

A Subconscious Designer

I want to write about design, but I don’t know where to begin. I have been a designer for 20 years and received an MA in graphic design; therefore, I am conscious about design. If I were to start now, I don’t think I would even get into design.

Like most kids who started college, I didn’t know what I wanted to do with my life. I went to La Salle University and major in communications because my cousin thought I was skillful at broadcasting, which I had never done anything with it before. It turned out communications had to do with writing and public speaking. I was terrible at both. Within the first semester of my freshman year, I knew I didn’t want to major in communications. I quickly switched to digital arts and multimedia design, which I also knew nothing about, but I didn’t have to speak in front of the class.

One of my first classes in my new major was learning Photoshop and I was hooked. In class, I just opened up Photoshop and played. Occasional my professor dropped by and said, “That looks cool.” I had no prior training in design and I can’t draw. I did not understand anything about design. The first webpage I made filled with blinking text, animated gifs, and colorful Comic Sans on black background. When I showed it an art history professor, she shook her head in disbelief. My design was driven by the software programs I had learned instead of the other way around, but I was not alone. The digital art and multimedia design program was brand new; therefore, many of the students including me did not have any design background.

The art history professor had to stop us from using the computers. She required us to buy sketch book, color papers, and glue. I still remember cutting out circles and squares from a piece of black paper and glued them into our sketch book. I did not understand the purpose of the exercise and thought it was a waste of time. I had no clue about composition, color, and design theory. Typography was not even taught in the program. I was not even aware of typography because we can only use a handful of system fonts for the web.

In retrospect, I would cringe at the design I did back then. If I were conscious of how terrible I was, however, I probably could not have become a designer. I came into design from a subconscious view. I thought I was good at it and I did not know how bad I was. I was like those aspiring singers who thought they are good at singing but they sound terrible. Then they would eventually sing better if they keep doing it.

The entry into design is low, but continuous learning is required to get better. My fifteen-year-old nephew Eric Trần is a good example. He started by using whatever tools available to him. He created his website using Wix and continued to hone his design skills. I don’t even know what tools he uses for photography and what typefaces he has access to, but his designs look much better than mine when I first starting out.

Like everything else, you just need to start somewhere. Don’t worry if your design isn’t good. You’ll get better eventually. Just don’t be too conscious about it.

How Can I Tell Her?

Through Facebook I reconnected with an old friend. She and I were in the Upward Bound program together. We were not close, but good friends since we spent several summers together.

Through her timeline I have learned that she had went back to Vietnam and opened a restaurant. I admired her adventurous career. When I looked at the logo of the restaurant, I immediately recognized the London Underground’s mark. The colors of the line and circle remained the same; just the text changed to the name of her restaurant. The logo is already incorporated into a huge neon light in front of the restaurant as well as all over the menu and marketing materials.

I did not want to tell her that’s a rip-off; therefore, I sent her a message carefully worded that her logo looks just like the London Underground’s. Her response was, “That is what we were striving for.” From what I knew of her back in the days, I do think that her response was honest and it came from a genuine place, but taking someone’s work is unacceptable.