Updated The Site and Added CSS Demos

Yesterday I saw the following tweet from Ben Tambling:

Love type resources, and this is a gem, but is it just me that finds the site itself a bit lacking in readability?

As I was processing what he meant, Ben sent me a personal email explaining to me that the text is a bit small on a large screen. Within minutes, I made the update to make the type much bigger on desktop. All I did was uncommenting some of the CSS lines I had in my SASS file. When designing for the site, I had the text size larger for desktop, but then I decided to stay at 16 pixels for consistency across devices. After I made the update, Ben tweeted:

Update #2: Very honoured to have Donny listen to my feedback regarding the site, now reads like a dream.

I am glad that Ben pointed it out because I like the new changes. Not only the text is more readable, but also the justified text looks like you’re reading a book. Another issue got fixed is the drop cap. It looks much more consistency now in different browsers. In the previous design, the drop cap was inconsistent because I only used CSS. Firefox was always a few pixel off the baseline. Someone at Adobe pointed out to me that although I talked about dropcap.js in my book, I was not using it on the site. Although I played with dropcap.js, I didn’t implement it because I didn’t want to add JavaScript and the drop cap didn’t behaved as it should in Firefox. Somehow the drop cap blew up twice the size it was supposed to be. The problem had to do with Adobe Caslon Pro, the typeface I used for the body copy. When I use Myriad Pro or Source Code Pro, the drop cap looked fine in Firefox. As a result, I kept CSS for my drop cap. I hope that browsers will implement the initial-letter property soon to make drop caps work consistently on the web.

As for the buzz, Professional Web Typography was featured in issue 23 of “Product Design Weekly.”

Love this tweet from Sonia Su:

Aspiring to make my website & résumé as simply beautiful as @visualgui’s! #obsessed #typography

I am also getting contribution from some readers. To show my appreciation, I added some CSS demos to “Practicing Typography” for them to play with. Thank you for supporting this project.

Lastly, thanks to Ms. Nguyen for a big shout-out.

The Modest Success of Launching the Book Site

On Sunday night, I spent several hours polishing Professional Web Typography. At around 2am on Monday, I launched the site, published the announcement, and notified Twitter, Facebook, and LinkedIn. Went to sleep and woke up three and half hours later when my iPhone gave me this notification. One tweet from Tim took off.

Jeremy Keith has written up about it in his 100-word series. The Pipe has chose it to be “Pick of the Day.” BeBe Ragsdale, my MA classmate, says: “This book is definitely one of a kind!” I couldn’t be happier. I am glad that the book is well-received.

One of the things that I seem to give the wrong impression is that the book is free. Although all the contents are available to the public, the book is not free. If readers find this book is useful, they can pay what they want for it. I explain the pricing model in the support section. I take on this project with deep passion and serious intention. I wanted readers to enjoy reading the book, learning from it, and supporting it.

SNDDC Conference

The SNDDC’s two-day conference, “The Future of News Design,” was informative and inspiring. Although journalism is not my field, I have always interested in the news space. It was such an eye-opening experience to see how these news organizations including The Guardian, NPR, The New York Times, and The Quartz stepping up their digital game. Vox and Breaking News have embraced the digital space from the start; therefore, it was intriguing to see where they are heading in the future. Many problems they have solved could easily apply to higher education. I was so glad to be at the event and had a two-minute talk with one of my design heroes: Jason Santa Maria.

SNDDC’s News Type Session

The first day of the Society for News Design’s workshop in DC is impressive. The News Type session was filled with exceptional presentations from respected type designers and typographers such as Roger Black, Christian Schwartz, David Berlow, and Indra Kupferschmid. Francesco Franchi showed off the amazing work he and his team had done for the printed IL magazine. Greg Manifold shared the redesigns of the printed edition of The Washington Post and Dan Zedek gave some insights on The Boston Globe’s digital experience. The News Type session alone is worth the price of the admission, which is quite cheap for educators. I can’t wait to attend the next two days.

Implementing Responsive Images

I have been avoided implementing responsive images for a while simply because most browsers aren’t support it yet. Furthermore, I am too lazy to cut up various versions of the same image. Nevertheless, I spent a few hours over the weekend reading and researching for the simplest solution to jazz up my portfolio. Since most of the works I am doing are responsive web design, I want to showcase some screenshots of the sites I have done. Wouldn’t it be nice to show visitors the mobile screenshot of they browse through my portfolio on smartphone, tablet screenshot if they use a tablet and desktop if they use a computer? So I cut up three different sizes for each site I want to showcase.

I read through a handful of articles on responsive images including Eric Portis’s “Responsive Images in Practice,” Jason Grigsby’s “Don’t use <picture> (most of the time)” and Yoav Weiss’s “Native Responsive Images.” Looking at Can I Use, SRCSET is only supported in Chrome and Opera. In order to get responsive images to work across browsers, I needed Picturefill. The deal-breaker for me with Picturefill is that it doesn’t work with the fallback SRC.

In the past few days, I have been thinking whether I should use it or not. Today, I decided to go forward with it since it is my personal site. I am now using native support for responsive image with the hope that it will work in the future when more browsers are implementing it. Check out the work.

Design Assignment

A friend recently went on an interview for a graphic design position and she was asked to do a design assessment. She thought the assignment was extensive and asked me if she should do it. Below is my response.

Design assignment is like spec work. I wouldn’t do it unless they pay for the time that I spend on it. If they can’t make a decision based on the design in your portfolio and what you have presented at the interview than you might not be the right fit for them.

With that said, I did spend the entire weekend (day and night) working on a take-home assignment for my current job. They wanted to make sure that I was able to import data into the database and display the information on the web page. They also wanted to know if I could access the server through the command line. Even though I did some web development prior to this job, I never had to touch the database and never had to use the command line. I reached out to some of my developer friends for help and I didn’t sleep until I got it to work.

It was very hard, but I wanted the job. I also wanted to challenge myself and I learned quite a bit doing it.

Type & Design Education Forum

Due to my conflict of schedule with family reunion, I can’t attend the TypeCon conference, but I managed to signed up for the Type & Design Education Forum, which allowed me to hear Tobias Frere-Jones’ keynote presentation.

This is my first time at TypeCon. Even though I haven’t made to the main event, I am already impressed. The attendees were very friendly, at least the ones at the Education Forum. What I learned was that most people who came to the forum are design teachers at universities and colleges. They shared their teaching processes, experimentations and student projects. I was very impressed and inspired. These speakers’ knowledge of type and typography were way above me. While all of the presentations were excellent, the one that stood out for me the most was Mitch Goldstein’s on Delightful Confusion. In a nutshell, he made his students embrace the idea of confusion: “Design what you don’t know.” In the process of searching for what they don’t know, they would find a solution that is unexpected. I don’t think that theory could apply to web design, but it worked on graphic design projects.

The highlight of the day was Frere-Jones’ keynote. His topic titled In Letters We Trust, in which he documented the history of bank notes starting from how Benjamin Franklin used type to make currency hard to counterfeit to the state of our bills. All the details he pointed out, such as reversing italics, using an upside down q for b and little nuances to avoid money fraud, were fascinating. Just the ways he took notice of these things alone proved that he is a brilliant type designer. I was so glad to get the opportunity to hear him speak.

Another person caught my attention was the sign language interpreter. I was sitting in the second row and couldn’t keep my eyes off her. Even though her sign language was amazing, what mesmerized me was her expression. One of the male speakers spoke in a monotone voice, but she translated with so much passion. Watching her helped me stayed awake. I loved it when a speaker took a pause to think, she expressed the same emotion on her face and body language. I don’t know how to describe it, but she was like a cartoon voice-over for sign language.

I’ll definitely attend the TypeCon next year or every year if I get the chance.

Typographic Talks

Day One of An Event Apart in DC

Yesterday I was given the opportunity to attend day one of An Event Apart in DC because the lovely people who organized the event allowed me to make up the second day of last year I couldn’t attend. I picked day one for this year’s event because I wanted to hear Jonathan Hoefler’s presentation on web typography.

Hoefler made the case that he didn’t like the phrase “Fonts on the web.” He prefers, “Fonts for the web.” The main different is that web font is a new creation rather than taking existing fonts and put them on the web. Hoefler went on to explain and demo how he and his designers reworked their fonts to solve problems specifically for the web. They focused on making types clear on screen and extending their family and features for multipurpose usage. Hoefler also showed off the tool they built in house to allow their designers to see how the fonts render natively in the browser. After seeing the works that go into their web fonts, I wish I could have a subscription to its cloud typography.

While Hoefler’s talk was eye-opening, Whitney Hess’ was inspiring. I could definitely related to the struggle of being presence: Get distracted easily, find themselves easily irritated and feel imbalance in their work life, health and family. As I am listening to her presentation, I kept thinking to myself that I need to be better at being presence. I need to turn off all electric devices after work and being presence when I am with the kids. I made the change immediately yesterday.

Another engaging presentation was from UX expert Jared Spool. He was such a smart speaker. I wish I could go to his new school and learn just a bit of his skills on UX strategy, but I don’t have $60,000 and two-year commitment. On top of that, I have a family to feed.

Jeffrey Zeldman, Luke Wroblewski and Josh Clark were all great. I was glad that I sat right on the first row, kept my laptop closed and my eyes and ears opened.

Complying With the Mason’s Brand

Last week George Mason University launched its first comprehensive brand profile. After reading through its 96-page documentation, we revised the Mason Law site to comply with the Mason’s Brand. I crafted the new word according to the brand’s guideline. I changed the typography to Minion Pro and Myriad Pro to comply with Mason’s primary typefaces. The fonts are served via Typekit.