For the seventh iteration of my blog, I reset the typeface using the demo variable font of Roslindale, designed by David Jonathan Ross. Although this version of Roslindale is still a work-in-progress, David would send it to any member of his Font of the Month Club to try out. Of course, I jumped on the opportunity to test it out.

For big headlines, I wanted the ultra style to grab readers’ attention. For smaller headings, I used the bold display style. On mobile devices, body text set in text regular and text italic at 100% (16px). For large screens, I wanted to increase the size to 125% (20px). At this size, the text weights looked clunky and bulky; therefore, I changed to deck narrow regular and deck narrow italic. The deck style reveals less details at larger size. As a result, I am using six different fonts, but only needed one file. That’s the power of the variable font technology.

For code samples, I needed a mono font, but I hardly write about coding. It would be a waste if I had to include a font in my CSS, but would not using it much; therefore, I used Input Mono, also by DJR, for small details such as category, date, and pagination.

The Scalia Law School has a new dean who comes from business background. His first order of business is to get rid of Mason’s Green, Gold, and Orange. The only color from the Mason guideline that he approves is Bright Blue (#007dc5). Thanks to SASS, updating the color scheme for the entire website was effortless. Replacing one CSS file and voila!

Yesterday, we rolled out an updated logo with Mason’s Bright Blue. All the links and highlighted items are also blue. Our new color palette consists of blue, gray, and white. Maybe I getting wearied of Mason’s Green, Gold, and Orange, but I find the Bright Blue to be refreshing. I also appreciate the limitation of just using a few colors.

I am sure there will be more changes to come, but just changing the color alone makes a difference.

I changed the typefaces again. For body text, I switched to Bookerly, designed by Dalton Maag for Amazon Kindle. I love how legible Bookerly appears on e-books. I also changed the background from pure white to light grain-like paper quality. I am a lover of physical books.

For the headers, I went with Ballinger, by Signal Type. I had the opportunity to work with Max Phillips on supporting Vietnamese. I really love the black weight for headers. I wanted to use Ballinger’s text weight, but I still hesitated to use sans serif for body copy. Maybe some time in the future.

In the previous iteration, I said that it would be a while before I made the change again and yet it only lasted 4 days. That’s the beauty of having my own site. I can change it up whenever I want to. I love the freedom to write as well as the freedom to design.

The homepage is featuring a lovely illustration of a diverse group of people supporting Joe Biden. I lifted that artwork right off joebiden.com, which is being displayed way too far down on the official website. I wanted to give it more prominent space on my site until Election Day. Go vote for Sleepy Joe so you can sleep better at night knowing a competent, compassionate president taking care of America.

For iteration 5, I changed the typesetting to Bitter, designed by Sol Matas. In the previous version, the body text was set in Harriet, by designed by Jackson Showalter-Cavanaugh. Although Harriet is beautiful, its serifs appeared a bit too busy for reading on the web. I wanted something simpler and less busy. Bitter fits the bill. Bitter is an open source typeface and it is also a variable font.

In the past few years, I tried to avoid using open source fonts. Because they are open source, anyone can use them. I wanted to have a bit of a selective typeface, but I can’t resist Bitter. Unlike what its name might suggest, Bitter is such a friendly text face. It is so much easy on the eyes. It has distinctive serifs, but not too overwhelming. I wish its black weight has more contrast, but it is still pretty good-looking for headlines. Since it is a variable font, it would be a waste not to use it.

Google Fonts has been putting out so many high quality typefaces with Vietnamese support. I am very impressed with its dedication to typography. I still don’t want to let them host the fonts on its end. I am hosting all the fonts on my own server. If you want to use Bitter, go check it out on Google Fonts.

The forth iteration of this blog returns to an ad-free design. The ad experiment was fun, but didn’t quite work out as I hope it would. I didn’t think it would work out because I always wanted to change up the design of this blog. With ads, I might be stuck with one design for a while. As a result, I wanted to get back to just making this site a personal blog like it always has been.

A few months ago, I also reduced the footer. I moved all the footer stuff to the info page. The bottom of the blog is now much lighter. I like that. Scrolling on a mobile device is less exhausting.

Of course, the redesign comes with new set of typefaces. Body copy is set in Harriet. UI elements are set in Alright. Both typefaces designed by Jackson Showalter-Cavanaugh for Okay Type.

When David Jonathan Ross sent out Pomfret on July 1^st to his Font of the Month Club members, I immediately thought of using it for Simplexpression.

Pomfret is such a beautiful, elegant titling face based on Bertram Goodhue’s Arts & Crafts lettering for The Knight Errant magazine. Unlike the original drawing, David increased the contrast between thick and thin to give Pomfret the extra edge.

In addition, David added over 175 ligatures. Simplexpression has always been about the hidden letter E. As a result, Pomfret is perfect for the Simplexpression brand. With the new wordmark, MP, EX, and EX are joined together. Although SS is a ligature, I wanted to make it extra special. I flipped the second S to form the heart shape. It also gives a sense of weaving strings together like when my wife created her pieces with her hands. I really love how the new wordmark turned out. Take a look.

I have the pleasure of working with Kristin Bair to promote all three of her novels: Thirsty (September, 2009), The Art of Floating (April, 2014), and now Agatha Arch Is Afraid of Everything (November, 2020). With the release of her new book, she wanted a new website. Her goal is to have everything in one place. I revamped her website to draw attention to her new novel and to simplify her online presence.

Read my write-up or check out her new site.

For the law school’s class of 2020, we wanted to do something special on graduation. The Senior Associate Dean wanted to put together a banner on our homepage looping all the graduate names. When I received the request, I was not sure how to include over 230 graduates on a small banner. After doing some research, I came up with the scrolling solution, which is similar to the credit at the end of a film. I came across this simple CSS scrolling text technique by Syed Murtaza and adapted for our own use. The scrolling banner is only featured for today so take a look before the day is over.

In a typical graduation year, we would have a print booklet about 40 pages. Since the event is online this year, we wanted to create a short program page recognizing all the graduates. I put together the program page using CSS multi-columns. I really love this CSS feature. It makes typesetting for something like this painless.

We also created a page for the faculty and staff to leave personal notes for the graduates.

I was flipping through the recent issue of Time magazine and came across a layout that caught my eyes. I love the photo treatment. The layout is simple yet striking. As a result, I wanted to adapt it for this blog.

Using CSS Grid, I played round with combining text and photo. I can divide the layout in half or make the image takes up two third. I can use grid template areas to switch the placement of the image. I really like the flexility CSS Grid provide. The best part is that the photo only shows up on large screens via media query. Small screens only get text layout. The photo does not download on mobile devices. I do not want to waste reader’s data.

I haven’t used photography on my blog for a while and I have been wanted to bring it back. I am pleased with this direction. It took me about half an hour to accomplish this. I really love CSS Grid.

For iteration 3 of this blog, I changed the big display text to Gimlet Sans, May’s Font of the Month that David had just sent out earlier today. Because of the lovely “a” in Gimlet Sans, I switched the text face back to Fragen, by Lucas Descroix. I love the way the “a” in each typeface has similar features, and yet they are different.

I also brought back the dark mode after reading Kilian Valkhof’s “Your dark mode toggle is broken.” I didn’t implement the toggle button. The only way you would see the dark mode is when you switch your operating system to dark mode. I also added a bit three red stars as end marks for a bit of decoration. Why not?

One of the best things of having a personal website is that I get to experiment and change the design whenever I feel like it. It gives a bit of a joy during this difficult time.