Typography Resources

I’ll use this post to write down typography related resources. I’ll add to it as we go along.

 

Typographic Hierarchyhttp://badassideas.com/typographic-hierarchy/ It’s Samantha Warren’s article on typography and sets both typography and a lot of graphic design principles up well.

Prof Stein’s Typography Rules. Some rules I have for typography. There are not that many but it can take a while to master them. http://webdesign.blogs.peopleio.net/design/typography/

Big List of Type Examples and Resources. Some of this page will duplicate what I have here but you do have to go here for the example pairings. http://teachingmultimedia.com/typeExamples/hierarchy.html

 

Midterm Design Examples and Preferences. This has some examples dealing with Typography.

Google Web Fonts

Resources for using Google Web Fonts.

Beginners Guide to Google Web Fonts: If you’ve never used Google Web Fonts before then you might want to check out this article first.
http://designshack.net/articles/css/a-beginners-guide-to-using-google-web-fonts/

10 Great Google Font Combinations You Can Copy This is a list of font pairings with the link code for the HTML and the CSS you can copy and paste into your project.
http://designshack.net/articles/css/10-great-google-font-combinations-you-can-copy/

This is a compact list of some of the better Google Fonts. I’ts like Flipping Typical but instead of showing the fonts installed on your computer it shows Google Fonts.
http://somadesign.ca/demos/better-google-fonts/

More Google Web Fonts: goodwebfonts.com/category/google-fonts/

And more examples of Google Web Font Pairings: awwwards.com/best-20-webfonts-from-google-web-fonts-and-font-face-embedding.html

TOOLS to Help Write CSS

It can be hard writing the CSS for your typography or in general. These tools can help. You set them visually and then copy the CSS to put in your stylesheet.

Typetester: Lets you compare several fonts side-by-side
http://www.typetester.org/

CSS Typeset: Modify text with sliders, get the CSS to make it happen in the next window. Simpler to use but less to modify than Typetester
http://csstypeset.com/

Typechart Another way to see prospective fonts and get the css
http://www.typechart.com/

One response to Typography Resources

  1. [...] more links about Google Web fonts and more on on our Typography Resources [...]

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright © MMP240 Fall 2012
Just another BMCC Multimedia Blogs site

Built on Notes Blog by TDH
Powered by WordPress

That's it - back to the top of page!