Over a million developers have joined DZone.

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

· Web Dev Zone

Make the transition to Node.js if you are a Java, PHP, Rails or .NET developer with these resources to help jumpstart your Node.js knowledge plus pick up some development tips.  Brought to you in partnership with IBM.

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.

 

Learn why developers are gravitating towards Node and its ability to retain and leverage the skills of JavaScript developers and the ability to deliver projects faster than other languages can.  Brought to you in partnership with IBM.

Topics:

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

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

{{ parent.tldr }}

{{ parent.urlSource.name }}