Typographic standards in production on the web.


Creating richly beautiful typography has always been a chore for me. Coding everything from layout to application there is not much time to spend and there is always something that bothers me in the final project. I use the 960 Grid System for layout and it has finally started to pay off. I needed something similar to use for typography, which started my hunt. I may be able to release a comprehensive system for the public in the future, but for now, I am going to keep things contained here and in my own use.

In many CSS files I have seen how typography is separated, but have only now come to understand why. I ran across Type-a-file.com about two months ago and yesterday and today have sifted through the files and come to a great discovery. Mad props to Strange Native and Jessica Hische. They have created system that I am now going to use as a base to my own system of website production.

Another great innovation in web typography is the Google Fonts directory. A free service that provides many great typefaces for use on the web. I have combined the use of it, and the files from Type-a-file to implement a visual check and sort of worksheet for styling typographic elements on a page.

My Process.

The Display.

I grabbed the source HTML of Type-a-file and edited out a few of the extra things the site used such as JavaScript and unnecessary layout classes and content. Once finished stripping these out and validating, I will insert commented scripts of every Google Font available into the of the document. The only thing needed from this file in real production is the code of the font decided upon.

A future version may include a JavaScript application where the typeface and size can be decided upon dynamically just like on Type-a-file.com, but I don’t see that being very useful as depending the font face, tweaks will be made to the CSS file anyway. For now a link to the Google Font directory will suffice.

The Styles

I like all of the styles Type-a-file has done, but “Library Science” particularly stood out to me. Jessica Hische has an eye for type. I downloaded that file as my base. For semantics, I also popped in Eric Meyers Reset as Strange Native says it what his inspiration. This will be replaced with the HTML5 Boilerplate resets as that is what I am currently using in production.

In addition to the reset, in a commented section, I will have an alphabetical list of the Google Fonts available from the in the HTML. This way, I can copy and paste without error.

What is great about this CSS is the top section where you can make overall changes with great ease. I grabbed the code for both the Large and Medium sizes from Type-a-file, so I can change to either depending on the layout I am working on.

The End Product

For the moment, I want to get to a system that I can change typefaces easily, while keeping a standard.

I will be able to copy and paste (if they are used) the Google Font script from the of my HTML and pop it right into my project . After minor tweaks to the CSS file, I will be able to pop it into my project CSS.

This will help in the swift production of gorgeous websites that I can feel confident are completely semantic.

I will update this post when progress is made. Thanks for reading, please comment and discuss.


About scamartist26

Passion is Art.
This entry was posted in CSS and HTML. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s