Make Every Webpage Beautiful: Two CSS Typography Tutorials for Developers and Designers

DZone 's Guide to

Make Every Webpage Beautiful: Two CSS Typography Tutorials for Developers and Designers

· Web Dev Zone ·
Free Resource

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:



Hard-core typography designers will probably find Joshua Gross' recent tutorial more to the point. Joshua (the creator of Kerning.js) assumes that you already have a feel for design concepts like vertical rhythm and kerning; includes an incredibly useful table that maps typographic concepts (tracking, skew, ligatures, etc.) onto CSS rules and browser support; and minimizes manual coding requirements with easily-modifiable snippets and applications of typography-specific JavaScript tools.



(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.)

Both tutorials are worth checking out for anyone interested in web typography, designer and developer alike.



Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}