Practicing Typography

Up to this point, you have developed a solid foundation of selecting body text, setting paragraphs, choosing headings, picking UI type, and applying some typographic details. You also have gained some basic CSS skills to style your typefaces. In this last chapter, I will provide you with some typographic demos to expand on what we have covered. I encourage you to download the demos, examine the HTML and CSS, and modify them to create your own.

Online Résumé

Designing an online résumé is a great way to practice web typography. You have to consider readability, legibility, hierarchy, and harmony; therefore, you need to choose your type with care. I recommend using no more than two typefaces and keeping the design simple. I also suggest making the layout responsive to ensure your résumé will work on any device. In the demo résumé, the layout is one column on small screens and expands to a two-column grid on large screens. For the typefaces, I combined Source Sans Pro, designed by Paul D. Hunt, and its companion Source Serif Pro, designed by Frank Grießhammer. Check out the demo page or download the source on GitHub.

Online Editorial Design

Editorial design is gaining momentum on the web as browsers continue to improve CSS support. Unlike print, you can take advantage of animation, audio, and video to enhance the visual storytelling. The potential for crafting an enriching editorial experiences is promising; therefore, I encourage you to explore this space. For the demo, I use my research paper on the history of web typography and turn it into an online editorial design. The main typeface is set in Lora, designed by Olga Karpushina, and the headings are set in Oswald, designed by Vernon Adams. I played up the main title to grab readers’ attention. I also added photos and video to liven the editorial experience. Check out the demo page or grab the source on GitHub.

Text Wrap

Wrapping text around an image is often used in print design to create a dynamic visual. On the web, however, the technique was not easy to pull off until the recent introduction of CSS Shapes. As of this writing, support for Shapes is still limited. You will need to use vendor prefixes to make it work. The good news is that implementing CSS Shapes won’t cause any harm in legacy browsers. Because Shapes is built on float, text and image won’t overlap each other even if the browsers don’t support it. Check it out and give it a shot as an enhanced feature. For further study, read Sara Soueidan’s “CSS Shapes 101.”

Portfolio Site

In my teaching experience on web design and usability, I have learned that many graphic design students don’t have their own online portfolio. They often use services such as Behance, Dribbble, Squarespace, or themed WordPress to host their work. The problem with using these sites is that they all look generic. Having your own site is still the best way to showcase your work and your personal brand. Your online portfolio doesn’t have to be complicated and fancy. For the demo portfolio, I have designed a simple site with the 960-grid system and the focus on typography. Raleway, designed by Pablo Impallari, Rodrigo Fuenzalida, and Igino Marini, is the only typeface used on the site. Even though Raleway doesn’t have italic, I wanted to play with its extensive weights. Take a look and feel free to use it as a starting point to build your own portfolio site.

CSS Demos

I created these typographic demos to learn new CSS features. I encourage you to do the same to hone your craft. You can explore the ones I have listed here or start to design your own. I highly recommend using the Mozilla Developer Network’s comprehensive CSS Reference to keep your CSS chops current and Bram Stein’s the States of Web Typography to stay up-to-date on typographic support on the web. Check out the demos below or download them all to play with. I will post more demos when I discover something new. If you want to contribute, hit me up.