Monday, September 28, 2009
Typography 101
Typography is kind of a hot topic right now, with Typekit is getting closer to launching & other technologies like sIFR ,FLIR, & Cufón. Typography is one of those things that's kinda hit & miss. Most of the time you just have to experiment with line-height, font-size, font-weight, text-indent, etc… But there are a few core concepts that you should keep in mind.
Leading
p { line-height: 15px; }
When I was building my first site I didn't give that much thought to line-height but it really can help or hurt the readability of your site. For example a nice average height is nice to read but if it's too short the letters can overlap and totally kill your readability. In contrast if the height is way too much it can make it a little tiring to read.
Measure
The length of a line of type is known as the measure. Your eyes get into a rhythm will reading & you should try not to disrupt that. When you read a paragraph, your eyes tend to wander & get distracted if a line is too long. A measure that is too short is tiring or even painful to read. Try to keep your measure to around 40, at the least, to 80, at the max, but this depends on your font size.
Rhythm
To achieve good readability using a baseline grid is essential. The key here is to Stay consistent! In order to do this keep all of the margins the same as the line-height, basically. On this site I did the following:
p { font-family: Helvetica; font-size: 14px; line-height: 20px; margin-bottom: 20px; }
h3 { font-family: Helvetica; font-size: 37px; font-weight: bold; letter-spacing: 0.1px; line-height: 20px; }
You'll want to play around & develop your own style but again stay consistent.
Contrast
Traditionally white text on black is the most readable type. Truthfully, black on white can get boring & may not fit your design in the first place. The concept remains, if your against white try to stay above #cccccc & don't go too dark if your against black.
Scale
If you've ever tried to read an article with a huge body type size, you'll know how important scale is. For body text I wouldn't go over 21px but I wouldn't go under 12px. Headers are a little more fexible, don't go over 60px in most cases.
Did I miss anything? Thing I'm an idiot? Leave a comment & let me know.
Sunday, September 27, 2009
Use CSS to format text
Some people don't realize that CSS can format text. For instance, you could hard-code all your titles in all caps(you probably shouldn't ever do that) but what are you going to do when you go to redesign & don't want all your titles in all caps? You'd have to go & retype every title on your entire site. CSS has a couple of properties that will allow you to type your titles any way you want & they will all be formatted the same.
Text-Transform
Text-transform, the property we are talking about, has three properties that you can pass it. Capitalize, uppercase, & lowercase. Capitalize literally capitalizes the first letter in each word, uppercase capitalizes every letter in each word, & lowercase capitalizes none of the letters in each word.
Examples
This IS Capitalized.
THIS IS UPPERCASE.
this is lowercase.
The CSS
#div h1 { text-transform: capitalize/uppercase/lowercase; }
Saturday, September 26, 2009
Marble Machine
Recently, I've been playing around with Cinema 4D & the new Mograph 2 dynamics. I was inspired by Nick's marble machine & decided to make my own. I've only built the parts so far but I'm definitely working on the full working thing. So stay tuned for that.
Marble Spiral
This was the first major roadblock in building this. First of all, I couldn't figure out how to make a real object out of a spline... later I found out that the Extrude Nurbs did the trick. Secondly, just trying to keep the marbles on the track was almost impossible but I keep tweaking the Rigid Body tag until they stuck.
Track prototype before/after
Before
After
I thought it would be kinda cool to see how much better textures can make your whole scene look.