PRINTERESTING · The thinking person's favorite online resource for interesting printmaking miscellany. Typotheque type foundry - high quality fonts for print and web. The Incredible Em & Elastic Layouts with CSS. Almost a year ago, Ty Gossman over at Stylegala asked me to write an article about elastic layouts. The best I could do was a quick email between work. I always meant to come good on that. Thanks for asking; sorry it took so long. This article will walk you through creating a basic elastic layout; what exactly an “em” is and how to calculate them, how to use ems to create an elastic layer for content with scalable text and images, including basic vertical rhythm.
What is an Elastic Layout? An elastic layout scales with users’ text size. More accurately, an elastic interface scales with browser text size—commonly a default of 16px—which users can change if they wish. Elastic design uses em values for all elements. They are calculated based on the font size of the parent element. See the elastic layout example. For other live elastic examples, visit Dan Cederholm’s beautiful and elastic SimpleBits, or resize text on this site.
Introducing Em, the Elastigirl of CSS Getting Started N.B. Lost World's Fairs. So you want to create a font. Part 2. Choices, Choices, Choices [ So You Want to Create a Font — Part 1 ] T he sheer number of fonts out there ( MyFonts.com sells over fifty-five thousand) is a testament to the fact that there are nearly an infinitude of creative choices that can be made when designing a font. Of course there are the basics: serif vs. sans serif (and the numerous subcategories of each of these); handwritten vs. precision print-quality; wide vs. narrow; bold vs. light. But beyond these obvious choices are some specifics you may not have thought of: closed or semi-open or open 4 ? Examine a bunch of your favorite fonts to get ideas about these specifics and others—see if there’s a method to the decision-making of others. Here are some other issues you may not have pondered: the height of the horizontal bar of your e the number of points in your * the degree of the slant of your # do your y and q have tails?
Don’t get so bogged down in details that you never get to the actual font-creation. Vertical Metrics Kerning. Making Geometric Type Work | Typography Commentary. For graphic designers beginning to experiment in type design, a geometric or modular typeface is a natural starting point. Illustrator and other programs offer a simple collection of elements such as circles, squares, and triangles which can be combined to create a passable alphabet. This is the same route I took when dissatisfied with the limits of commercial fonts at the time. I twisted and distorted each character to fit into a few simple, incredibly strict rules of construction. Invariably this produced a wide range of exotic letterforms, some more legible that others. The intention of creating an entire alphabet from a few shapes is a design challenge — problem solving at its purest.
Luckily for those who make a career from type design, the Latin alphabet is not simply a collection of modular elements. Attempting to apply exactly the same set of rules to each letter is similar to handing out the same size clothes to a random selection of adults. Balance Widths The Joins The ‘S’ Spacing. Cross-browser kerning-pairs & ligatures. Learn: Anatomy of a Typeface. Font Directory. GitHub. Cufón aims to become a worthy alternative to sIFR, which despite its merits still remains painfully tricky to set up and use. To achieve this ambitious goal the following requirements were set: No plug-ins required – it can only use features natively supported by the client Compatibility – it has to work on every major browser on the market Ease of use – no or near-zero configuration needed for standard use cases Speed – it has to be fast, even for sufficiently large amounts of text And now, after nearly a year of planning and research we believe that these requirements have been met.
So, how does it work? Cufón consists of two individual parts – a font generator, which converts fonts to a proprietary format and a rendering engine written in JavaScript. The generator In reality the generator is little more than a web-based interface to FontForge. The renderer The renderer is a bit more complicated. Handpicked free fonts for graphic designers with commercial-use licenses.
AisleOne - Graphic Design, Typography and Grid Systems. Typetester – Compare fonts for the screen. PXtoEM.com: PX to EM conversion made simple. Typechart - Browse Web Type, Grab CSS. Inspiration Bit. Typography. I Love Typography, devoted to fonts, typefaces and all things typographical.