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