Web Typography and Layout
Web professionals should be aware of this discussion concerning Web Typography & Layout: Past, Present, and Future. As a web professional, it is important to know what the future holds.
Key takeaways include:
- how to avoid being overwhelmed by all the tools and typefaces available today. We need to think of typography and layout as one.
- how to move away from frameworks and bring creativity back into layout. We should focus on larger type and readable layout, including proper use of whitespace.
- we should help the reader feel like a collaborator.
Three experts—Mozilla’s Jen Simmons, publication design legend Roger Black, and Jeffrey Zeldman (A List Apart)—discuss typography and layout on today’s web: where we are now, and where we’re going. CSS grid can be a very helpful tool. Jen Simmons provides a number of examples on her labs.jensimmons.com site.
Typography can encourage long-form reading and not just scanning.
What are the most exciting areas of cutting-edge experimentation in typographic technology and digital layout, and what new skills will we need to design tomorrow’s web content? At a minimum, we should understand CSS grid and variable fonts and how they can be properly applied. Layout and typography were connected in the age of metal type, and they will be again. We must make our pages readable and employ the time tested skills that were employed by typesetters so long ago. We should think in terms of properly sized type (which is responsive given that our content may be consumed on phones, tablets, desktops, or other devices).
This discussion also reviews the history of layout on the web, and what multi-device reading and orbital publishing means to the practice of publication design as we move away from frameworks. We need to bring creativity back into layout (including layouts that break the mold). We must fully understand the implications of CSS Grid and its portents and help the reader feel like a collaborator. There is a new wave of user customization, and we need to understand how it impacts our designs.
We encourage you to watch the discussion video and review the associated transcript.
For those aspiring web professionals who need a better understanding of these concepts, we recommend the following resources:
