Responsive Typography Demo. Home | Design in the browser with web fonts and real content — Typecast. Tim Brown — Universal Typography // Ready to Inspire'12. The Great Discontent (TGD) Contrast through Scale. « Back to Blog on Friday 19th of October 2012 Typographic contrast is a deft and powerful weapon in your design arsenal. Its presence and impact typically goes unnoticed by readers, but its absence can ruin a site.
In this series of posts, Christopher Murphy of The Standardistas takes a look at a number of techniques you can use to establish harmonious contrast in your designs. A typographic scale. ©vanseodesign.com by CHRISTOPHER MURPHY Contrast defines hierarchy, creates emphasis, suggests the relationship and relative importance of content, and can control how quickly text is read. You can create contrast through thoughtful use of: scaleweightclassificationcasecolor.
Used individually, each can be hugely effective. In this first article, I’ll focus on scale, offer some tips on setting a scale, and share some sites that I feel have used scale particularly well. What is scale? Scale refers to the range of values at which type is sized. By setting a typographic scale, you can: Audience needs. Responsive Typography: The Basics. By Oliver Reichenstein 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 homogenous. Today we deal with a variation of screen sizes and resolutions. This makes things much more complicated. In the heat of the relaunch I wrote a quick blog post on responsive typography, focussing solely on the aspect of our latest experiment: responsive typefaces.
To avoid designing different layouts for every possible screen size, many web designers have adopted the concept of Responsive Web Design. Adaptive layouts: adjusting the layout in steps to a limited number of sizes Liquid layouts: adjusting the layout continuously to every possible width Note: Responsive design already incorporates a lot of macro typographic issues (type size, line height, columns width). Choosing a typeface The right tone Serif or sans serif?