Make Every Webpage Beautiful: Two CSS Typography Tutorials for Developers and Designers
Join the DZone community and get the full member experience.Join For Free
The developer vs. designer debate will rage as long as the corpus callosum connects the cerebral hemispheres imperfectly.
Well, the 'D' in 'DZone' definitely stands for 'developer' -- but we do realize that design and development work best when both brains are talking happily to one another.
HTML5 is designed to make this happen. Interoperability means greatly simplified development, while many specific new features (semantics, canvas, audio, video) are intended to enrich and improve end-user experience.
Typography presents an interesting meeting-ground for the two sides. Developers are more likely to see text as information; designers see everything, including text, as part of a whole experience.
More practically: designers already have their own tools for making text look great (e.g., InDesign) -- and now developers have CSS3 and HTML5.
For one thing, CSS3 can link fonts, allowing CSS3-compatible browsers to render text in any web-accessible typeface. This is one of the more obvious typographic powers of CSS3, but there are plenty more.
Embracing CSS3's sophistication, two typography tutorials appeared online in the past week: one geared more toward developers, the other a bit more toward designers (though both tutorials include plenty of annotated code).
Developers will appreciate Chris Spooner's step-by-step translation of an earlier PhotoShop concept into a static HTML5 and CSS page. All of the design work was completed in the preceding post, so the developer can concentrate on realizing in code what the designer dreamed up in PhotoShop:
(By the way, if you're a designer and want to understand development better, you might want to read through this just-posted introduction to programming for designers -- very non-technical, and sprinkled with visual aids.)
Opinions expressed by DZone contributors are their own.