Typogridphy — A Typographical and Grid Layout CSS Framework From Harry Roberts of CSS Wizardry
Grids & Typography
Typogridphy is a CSS framework constructed to allow web designers and front-end developers to quickly code typograhically pleasing grid layouts.
Based on the popular 960 Grid System, Typogridphy allows you to create grid layouts which are versatile and great looking. Typogridphy is made of fully validate, semantic and strict xHTML, and validate CSS.
It also uses a typographical method know as ‘creating vertical rhythm’, whereby all adjacent lines of text line up horizontally, regardless of line breaks and new paragraphs. This method in itself isn’t that difficult to accomplish — using pixels. I have created Typogridphy using ems, meaning the layout is zoomable — try holding your Ctrl key and scrolling your mouse wheel.
Open Source
Typogridphy has been released by CSS Wizardry’s Harry Roberts Free Of Charge — it is available for commercial and personal use.
- I learned new techniques
- It was an enjoyable development
- It’s not always about the £
- To give something back to the web community
Typogridphy has been made free for a number of reasons. I made the CSS originally for myself, so it has served its purpose to me — however I was extremely pleased with the results so I thought I’d adapt and then share it. Also, I taught myself a lot during its production, and they do say the best way to learn is to teach. I have gleaned untold knowledge of typography for the web, as well as good techniques for proper use of the CSS cascade.
Download…
Typogridphy is available for download Free Of Charge. The source is fairly well documented, and a basic knowledge of CSS will be enough to see you on your way. As Typogridphy is a free project, support and advice will be limited at best, but should you have any pressing concerns please do contact me.
Typogridphy will, hopefully, continue to grow with support and advice from you, the users. If you have any recommendations, fixes for bugs, or better solutions then please let me know. This is the first time I’ve undertaken such a project, so it’s all very new to me as well.
“This is a blockquote, with a right float and a width of 280px. Even this maintains typographical flow!” — Harry Roberts
In the .zip file you will get Typogridphy as it is here — complete with syles not in play on this or the demo page — this includes form and input field styles. The CSS file contains the styles to shape the majority of non-depreciated elements, and the HTML files contain sufficient examples for you to get cracking with your own typographically perfect, grid based layout.
Lists
- This Is A List Which Is 220px Wide…
- …and has been floated left.
- Nested Lists:
- This is a nested <ul>
- By applying different classes to lists…
- …you can change widths and floats.
- This lists class value is
class="twotwenty float-left".
Typogridphy’s lists maintain the vertical rhythm, meaning that the lines of text on your left (the <li>s) line up perfectly with the paragraph that you’re reading now — regardless of how many list items there are, and how many lines they break onto, the text always lines up.
Glyphs
Typogridphy is also designed to use glyphs, as opposed to the normal text used in web design. For example, use ‘æ’ in place of ‘ae’, ‘—’ instead of ‘-’ and ‘…’ as opposed to ‘...’.
A good way of finding out about different glyphs is through Dreamweaver’s design view. Wow, I never thought I’d be singing the praises of a WYSIWYG application!