Layout Patterns for Scalia Law School Website

When I took over the law school website, responsive design started to gain traction. In my interview presentation, I made the promise that I would make the whole site responsive if I were hired. Even though I had very little knowledge on server administration, which was the main responsibility of the web services developer position, I was hired.

My supervisor at the time told me, “Although you don’t have much backend knowledge, you have a strong sense of design. I am sure you will be able to pick up all the server stuff.” I was thrilled that she had more confidence in me than I did in myself.

To keep my promise, I ripped out all the HTML and CSS and rewrote them from the ground up. I also approached mobile first in my responsive redesign. I did not use any frameworks; therefore, everything I coded tailored to the site—nothing more, nothing less. At that time, we still used floats for layouts, but as soon as the CSS grid landed on major browsers, I rewrote the CSS to take advantage of the grid functionality.

To give our site more flexibility, I developed layout patterns based on the grid system. I put together a demo page to show different combinations (buttons, images, text, video). The grid can accommodate at least 12 layouts. The best part is the fluidity of the grid system. It is made to adapt to any digital device.

Neue DIN: German Engineered, Vietnamese Premiered

Neue DIN, made in Berlin by Hendrik Weber, Andreas Frohloff, and Olli Meier, has been German-engineered to take advantage of the variable-font technology. Neue DIN packs 81 styles into one single variable font. The weights span from extra extra thin to black and the widths vary from extra extra condense to extra extra wide.

With the power of variable font, the sky’s the limit. From advertising and packaging, editorial and publishing, film and TV, logo and branding, poster and billboard, software and gaming, sports and entertainment, wayfinding and signage, to website and user interface, Neue DIN is ready to take on any platform and environment.

Neue DIN supports 435 languages, including Vietnamese. Ivo Gabrowitsch and the talented team at Fontwerk cared deeply about the language expansion; therefore, they reached out to me when they designed Vietnamese diacritics for their typefaces. It had always been a pleasure experience working with them, and Neue DIN was no exception.

As versatile, flexible, legible, and incredible Neue DIN is, I wish it had an oblique or italic companion. Without italicized letters, a typeface can’t be a textface. In most writing formats, including APA, MLA, and Chicago, emphasis and title of source needed to be italicized. Let’s hope Neue DIN will have italics in the future.

Phan Thị Ngôn Ngữ: Dùng dằng

Tập thơ lục bát của Phan Thị Ngôn Ngữ mở đầu, “Quê hương sau cuộc chiến chinh / Tang thương vận nước điêu linh phận người”. Gần đây tôi đọc thơ của những tác giả sống ở hải ngoại, ai cũng viết về quê hương với nỗi đau xót xa và nỗi căm hờn. Cũng may là cô PTNN đổi sang những đề tài khác như “Ra phố nhặt đời”:

Sáng ra phố nhặt mặt trời
Nhặt trong vô lượng những lời u minh
Rưng rưng cúi nhặt bóng mình
Đã trần ai khốn chông chênh tháng ngày

Bạt ngàn mỏi vết chim bay
Níu hư vô hỏi cao dày tầng không
Xa thuyền níu bóng hỏi sông
Khuất người níu mộng hỏi lòng đầy vơi

Sáng ra phố nhặt tình đời
Nhặt tâm vọng động nhặt lời vong ân
Đa đoan trầm ngải bao lần
Quẩn quanh mê lộ cũng ngần chiêm bao

Trăng đùa nhành trúc hư hao
Gió ru đêm lạnh thì thào ngõ quanh
Phố khuya đèn thức ngọn xanh
Hồn ta chiếc lá đoạn cành tiếc sương.

Thơ của cô đẹp, truyền cảm và cách xếp chữ của cô flow rất suôn sẻ và êm dịu. Sách bên trong thiết kế rất sang trọng. Chữ dễ đọc và rất nhiều chỗ trắng (white space). Đáng tiếc là thiết kế trang bìa không được ấn tượng.

Điều thú vị là tác giả ở thành phố Annandale rất gần chỗ tôi đang cư ngụ. Hôm nào ghé qua thọ giáo.

Chinh Nhân: Khóc cho quê hương

Khóc cho quê hương là những “lời căn hờn của người tị nạn” Chinh Nhân. Quả nhiên thơ của tác giả chứa chất quá nhiều căm hờn và căm giận cho nơi chôn nhau cắt rốn ông đã bỏ đi. Đọc hết tập thơ của ông chỉ có được vài bài không nặng ký. Chẳng hạn “Ngâm khúc đất đồng” rất đẹp. Ông viết:

Ầu ơ!!! σ…

Quê Hương mình đất đồng sâu nước đọng
Ngửa mặt nhìn bầu trời rộng bao la
Nước dâng lên rau muống nổi là đà
Dây bìm bịp ngẩng đầu leo trên lá

Mẹ quá già trái tim thành sỏi đá
Mái nhà tranh tá túc với nương rau
Có những khi cơm thiểu trước hụt sau
Tình đồng bào phải đùm bọc cho nhau

Cơn buồn tủi lẻn vào lòng chua xót
Đàn chim sẻ thiếu ăn nên biếng hót
Lượm thóc thừa lót dạ đỡ qua ngày
Mơ trời xanh tung cánh lướt bay hoài

Tôi đã sống trên đất Mỹ gấp ba lần những chuỗi ngày tôi sống trên đất Việt nên tôi không còn coi nặng về những hận thù nữa. Đọc thơ Chinh Nhân tôi chú ý đến cách gieo vần hơn là ý trong thơ.

Visualgui 2024.1

Last week I relaunched this blog with a new text face, Kaius, designed by Lisa Fischbach. Today I found a tiny bug in its Vietnamese diacritics. The breve and the hook above on the lowercase a () are mapped to the circumflex and the hook above (). I thought I misspelled my Vietnamese, but the issue was the font. I reported it to the designer. Hopefully she’ll get it fix.

In the meantime, I needed a new text face; therefore, I went ahead and licensed Herbik, designed by Daniel Veneklaas. I wanted to license Herbik a while back, but I hesitated because I have been spending way too much on fonts. Now I have the legitimate reason to get them.

I could have used an open source typeface on Google Fonts or rented a typeface on Adobe Fonts, but I wanted to use typefaces from small, independent foundries and to host them on my site—not from a third party. I love Herbik. With buoyant and robust serifs, Herbik lends versatility, readability, and legibility to long-form reading text.

Nguyên Tú: Mộng Xuân

Tập thơ xuân của Nguyên Tú nói lên nỗi niềm tha hương, nỗi nhớ quê nhà, và nỗi căm thù. Cá nhân tôi thích đọc những bài thơ tình nhẹ nhàng như “Xuân em”:

Xuân em đẹp nét lạ thường
Bút tô mầu mắt lệ vương ngang trời
Mọng môi nhạt cánh hồng ôi
Chiều mây hong mái tóc ngồi thẩn thơ
Gió buông nắng ngả lưng chờ
Cỏ lao xao động dáng thờ thẫn trông
Bước em về xóa trời đông
Bước ta cùng lối tình không ngăn rời
Bên nhau xuân tiếng ru hời
Vào êm giấc ngủ mộng thời lan trôi
Hoa xuân trồi nhánh bên đồi
Nụ e ấp gởi làn môi thơm nồng.

Đọc để nhớ thương chữ Việt của mình.

People & Blogs

I’ve been reading Manuel Moreale’s People and Blogs. I am so glad to see people are still blogging. I’ve been doing this since 2003 and haven‘t stopped. It’s all good, baby baby!

How I Become a Type Advisor

Since the release of my book, Vietnamese Typography, in the winter 2015, I have had the opportunity to collaborate with type designers and type foundries around the world. I reviewed their diacritics and made recommendations to improve legibility and readability for Vietnamese readers.

When I decided to drop my book on the open web, I wanted to provide a complete resource for designing Vietnamese diacritics. I did not think about the advising service until David Jonathan Ross reached out to me to review his hyper-stylized typeface called Fit. As the name of the typeface suggested, everything must fit—even the diacritics. The double-stacked marks in Vietnamese proved to be a challenge. We went back and forth many rounds until we came to the perfect fit. In our collaborative efforts, I learned about his design process and decision making.

After my work with David, I realized I could offer similar advice to other type designers. As my site reached the type community, requests for reviewing Vietnamese diacritics rolled in from different parts of the world, including Dalton Maag in London, TypeTogether in Vinohrady, Sandoll in Seoul, Fontwerk in Berlin, Grilli Type in Lucerne, Klim Type Foundry in Wellington, TypeNetwork in Seattle, and Frere-Jones Type in Brooklyn. For a complete list, visit my client section.

In addition to typefaces, I review apps, websites, and any materials with Vietnamese text. As a result, I added type advisor to my resúmé to make the title official.

Need a Holiday Gift?

Check out Dana Nguyễn’s handcrafted simplexpression, in which she captures the joy and spirit of the festive season in the heart of Fairfax City.

Nguyễn Nhật Ánh: Đảo mộng mơ

Với niềm tin và tưởng tượng, một đống cát có thể biến thành một hòn đảo mộng mơ. Truyện ngắn của Nguyễn Nhật Ánh đưa ta về với tuổi thơ đầy thơ mộng. Phải chi giờ đây đám nhỏ dùng đầu óc tưởng tượng ra những trò chơi đầy thú vị thay vì chứ chuối đầu vào máy. Mỗi thời mỗi khác biết làm cách nào bây giờ. Thôi thì tìm những quyển sách như vầy để lui về thời thơ ấu. Những ai thích truyện Nguyễn Nhật Ánh thì không thể bỏ qua câu chuyện thật dễ thương này.