Small details that will greatly improve the readability and aesthetics of your website

Interesting and impactful text is often deemed a “print only option”. But we can have those effects now with real web text.

Modern CSS gives us the ability to set type for a dynamic medium, which is something relatively new, and requires us to look at typography with a fresh perspective. Chinese typography traversed its own parallel path of evolution over the centuries and this talk will cover the use of CSS as the typesetting tool of the web for both Chinese and Latin-based languages.

As more people move into the online world, it is more crucial than ever to ensure that the world’s diverse written languages have their place on the web. Typesetting on the web doesn’t involve metal sorts and composing sticks. Instead, we use web fonts and CSS. We will be covering the various font properties which, over time, have been continually evolving, giving developers better control over the typography of their projects, as well as even better performance with variable fonts.

Open Sans, Open Sans, Open Sans – it’s everywhere! It’s the second most popular web font, it’s the new Arial. However, there is nothing wrong about Open Sans specifically, it’s just overused. Picking a typeface is an opportunity for your website, app or digital product to show personality, be memorable and stand out among its competition. And if you’re using Open Sans you’re missing out on all that good stuff.

When you’re designing a page, it’s essential to think about who your audience is — and that your audience may not have the same abilities as you. Making your documents accessible is not just about adding alternative descriptions to images; it’s about thinking through all the ways you can make your design work for as many people as possible. Join me as I explain the choices you can/should consider in an accessible visual presentation using text, such as font, color, contrast, size, column width, spacing, kerning, and more.

For centuries, typography has shaped the way we ‘hear’ what we read. In our web work, though, we've have to balance our typographic desires with user experience and performance, knowing that every weight, width, or style of a typeface required a different file download. Variable fonts change that, as they include every width, weight, slant, and other permutation of a typeface, all in a single file not much bigger than a regular font file. Now, beautiful web typography can be crafted to respond to screen size, language setting, even ambient light. In a detail-packed hour, Jason will show you not just how far the new capabilities can take us, but how to make use of them right away.

The web was invented to display text in a left-to-right horizontal writing mode — the way English and other western European languages flow. But as Bruce Lawson says, WWW stands for the World Wide Web, not the Western Wealthy Web. It's more important now than ever to be inclusive and global in our thinking, and resist imperialistic and nationalistic impulses.

A case study of the custom typefaces developed for Pentiment, a video game set in medieval times.

Some text distortion experiments using the Blotter.js library. The idea is to distort text as we scroll or move the mouse.

Wrap text around an image, shape, or object, just like you would in InDesign.

A personal project I am working on, with the end goal of pulling off an all-black and white website.

When we built websites we usually started by defining the body text. The body text definition dictates how wide your main column is, the rest used to follow almost by itself. Used to. Until recently, screen resolution was more or less homogeneous. Today we deal with a variety of screen sizes and resolutions. This makes things much more complicated.

With a Web code, Victor Widell is making it easier for others to understand how reading with dyslexia might feel.

A game that helps you learn to kern type

Inspirational font combinations and color palettes free to use in your own designs.

A searchable archive of typographic design, indexed by typeface, format, and topic.

A typographic dating game that helps you learn how to pair typefaces.

Why do all memes look so similar? There are a few very good reasons.

This book was written in 1969 for a lettering course at the Pratt Institute. This chapter is a treasure trove on spacing - between letters, between lines, and between words. Lots of great examples and ideas here to improve your legibility in Layout 1, and a good head start for some of the ideas we'll discuss next class with creative typography.

Google Fonts is a great place to get free fonts of all kinds. Just keep in mind that you'll need to evaluate each typeface for quality, readability, and how it matches the information you're trying to communicate. Does the typeface have several weights to help you control hierarchy? Are the shapes balanced and easy to read for body copy? Great typefaces are at the root of great design. Good typography will support your design without becoming noticeable, while bad typography and typeface choice will detract from it.