What is line height?

If you’ve ever had to type a paper, you’ve probably had to write it in double space. That setting  in Word (line spacing) is what we’re talking about. It’s the distance between each line of text in a paragraph. It’s usually called line height or line spacing (in CSS it’s called line-height:)

The trouble is that most people set their line-height entirely too low. The usual reason is to save paper (or space on the web). The problem is that the more you cram text together, the harder it is to read. Take a look at the hastily-created illustration below.

I don’t know if you can see it or not, but the easiest text to read there is the text set to 21px line height. There’s a lot of sciencey stuff that goes into why it works that way. I’m not really going to talk about that. Just understand that the rule on line height is that it should be 1.5x your font-size.

When should you ignore this?

As with most rules, this is more of a guideline. You may want to use a higher line height when working with light text on a dark background (like I did with a recent catering website). You might want to set it higher for serif fonts than for sans-serif fonts, because the fancy serifs may require (or kindly request) more room to breathe. You should also always use whatever your teacher/professor asks for.

You can use a lower line height if your working with all capital letters (not too much), or if you’re working with odd fonts and it just looks better. Larger type can also require less line height.

Why’d you write this?

You might have been doing it right all along, I dunno. For the most part, though, people tend to get this wrong. You’ll typically see line height set entirely too low, either to save on space or because it’s the default setting. Adjusting your line height is a really simple thing to do and can make a big difference. Give it a shot.

I told you this post would be short. I kept it under 500 words.

]]> http://www.cookieofdoom.com/2010/02/04/line-height/feed/ 0 http://www.cookieofdoom.com/2010/02/04/line-height/ http://feedproxy.google.com/~r/CookieofDoom/~3/XN_qaTkKZWg/ http://www.cookieofdoom.com/2010/01/13/mw2-clan-website/#comments Thu, 14 Jan 2010 04:08:25 +0000 cookieofdoom http://www.cookieofdoom.com/?p=666 So you might have noticed that I haven’t written in a few days. I’ve actually been quite busy working on my clan’s website (Nine Eleven Clan). Some of you guys are probably wondering what a clan is. Basically it’s a group of people that you play video games with, which makes me a nerd. I have my own Blog with a custom made theme, though, so “nerd” was already assumed.

Anyway, I have a few things to say about the whole experience. I’ll add some headers to make the post easier to follow.

How I made it

First I started with a wireframe, of course. I wasn’t even sure what Content Management System I was going to use (leaning toward SMF or phpBB3), I just wanted to flesh out what the site would look like. I already knew what features and things we’d need.

Once I had the wireframe it started to become clear that SMF would be my chosen CMS. It had better support for plugins that we would need, I was most familiar with it, and so was my clan.

The Design Process

I decided to take the color scheme from Modern Warfare 2 for the most part. Green was a large part of the MW2 brand, and orange was also used extensively. My initial thought was that they would clash, but I then remembered that they’ve been used tastefully elsewhere.

I decided that this would be my first grunge website. I’ve never really done grunge style, except in a couple signature images. The background texture was the easiest part, I just mixed a bunch of textures together using various blend-modes and added a gradient.

I learned a lot in the designing of the rest of the site. I used bevel in ways I’ve never really used it before (might write a post on it sometime), and had to do a lot more with putting text on top of busier backgrounds than I ever have before. Looking back, I wish I could have used fewer boxes.

I made a few decisions that go against the standard for most forums. I used a fixed-width layout, which I suppose is becoming more and more common. I also limited (through defining widths and having lots of negative space) the amount of room for posts. This was to keep posts from stretching out and being difficult to read.

I’ve gotten some complaints about it, and some positive comments. Some people don’t like the fact that signature images can’t be wider than 370px, some people like how readable the site is. I guess you can’t please everyone.

The Coding

Well, I think I’d have done the coding completely differently. I took the default SMF (2.0) theme and started modifying it. The trouble is that the CSS is horrible. It gets the job done, but it’s quite sloppy. It’s annoying to code for. I used it at the advice of some tutorials, but I think next time I’ll do more reading to see if there’s a better option.

The community was extremely helpful. I had some problems with my PHP code, and was able to get it resolved within a couple hours. Actually, one of the members was kind enough to write some of my code for me, basically. That’s probably my new favorite thing about SMF.

Not Done Yet

I should point out that as of this post the site isn’t done. I still haven’t coded my footer, and there are a few bugs. You should definitely check it out though, especially if you’re looking for an MW2 clan.

When pressed on the issue, however, they don’t always have clear reasons for wanting a blog. Sometimes it’s just “everyone else is doing it” (which isn’t always a horrible reason), and sometimes they literally have no reason. They just “thought it would be a good idea.”

Most people don’t realize that starting a blog is a pretty big project. Here’s a list of things I can think of that should scare you away (or at least be considered):

• Hosting: Some web hosts don’t provide sufficient features or processing power to run a Blog.
• Content Management System: You probably weren’t going to code the entire blog from scratch, that’s a really big project. You need to decide between options like Wordpress and Drupal. Here’s a good article on choosing a content management system (CMS).
• Themes/Templates: Using a free theme might seem like a good idea at first, but having someone design something for your blog will almost always look better. That’s more important than you might think.
• Security Updates: If you’re hiring someone to do this for you, he’s probably going to expect you to pay him to do the security updates. That may mean a larger up-front fee, or it may mean a recurring fee. You could learn to do it yourself, but with some CMS’s that process can be time consuming and annoying.
• Content: Oh, yeah. You’ll stop getting visitors if you don’t post content regularly. I have this problem all the time. It’s difficult to find time and motivation to write even one post per week.
• Readers: You won’t get many readers if you don’t make an effort to spread word about your blog. That’s done a lot through social networking now.

Don’t get me wrong, though. There are plenty of reasons for a small business to have a blog. Ultimately it’s going to come down to weighing the pros against the cons. Here are a list of things a properly done and well-maintained blog might help your business:

• Customers/Clients: I can’t actually say this has ever worked for me. I’ve never gotten a client through my blog. However, if you look like you know what you’re talking about, and you get enough readers, it may work out. I’ve heard stories of designers meeting clients through their blog, so it’s definitely possible.
• Showing off: There’s probably a better way to put this, but basically a blog is an opportunity for you to show people that you know your field. This will help in the above-mentioned finding clients, but it can also make your current clients feel more comfortable working with you.
• Helping clients understand: On a few occasions I’ve sent a client a link to an article on my blog to explain things like wireframing. I’ll actually probably end up sending this post to clients in the future when they ask about blogs. It saves time writing to explain things to individual clients every time (though this is not always a good thing), and it can make you look a bit more professional.
• Making a name: Even if your blog doesn’t get you business directly, it can make others think more highly of your services. Your name (or business name) may be more likely to come up in conversation.
• Having a blog: This is a very bad reason to have a blog if it’s your only reason. It’s true that having a blog can make you seem more ‘hip’. That’s really more of a bonus feature than a reason, though.

There are more reasons for having a blog,.. having an excuse to waste large amounts of time, the overall learning experience, possibly advertisement revenue (harder than you might think), and other reasons. The truth of the matter is there are many good reasons to have a blog, and many good reasons not to have a blog.

I can’t really tell you what you should do, except to say that you should be careful. A blog is a big commitment. It’s important that you take the time to set your goals. You should also manage your blog in such a way that it actually accomplishes those goals (and doesn’t just suck the life out of you).

Anyway, I was also reading “My Life is Average” (Google it) a little bit lately. The combination of these things, and the reading over of my resolutions (specifically #16) gave me a new idea. It’s a bit crazy, I know, but I think it could be cool. It even deserves a new paragraph and a header.

I’d create a new domain called “somethingwonderful.whattheblindsee.com” (yeah, it’s long, I’ll probably abbreviate or something). Users could create an account, and post little things they’ve learned about God. It could be a verse, it could be something that happened to them during the day, it could be a song, etc. Just something that helped them to get a better picture of how wonderful God is.

The only way this would work, though, is if I had a few people committed to post on it regularly. It would work a lot like “My Life is Average” but without competition. It would work a lot like Twitter, except posts would probably be limited to something like 500 characters and not 140.

To be clear: the goal of the site is to glorify God by proclaiming His attributes and actions… and to encourage believers by stirring up affection for Him (which of course accomplishes in some way the first bit, but is a bit more specific).

Let me know what you guys think.

I didn’t think anyone would guess it. My dad (Michael) guessed it correctly first, but Phoenix was the most accurate. I’m gonna give it to my my dad, since there wasn’t anything about the picture that would give away what specific kind of marker it is, and Phoenix probably just guessed that (and did so last).

He’ll be posted in the page of winners soon.

My latest evil plan...

Well, I decided I really didn’t like my last mockup, which was based off of my wireframe. I liked some elements from it, but really felt like it was too simplistic. The new element actually has a slightly reworked wireframe, and brand new typography (planning on using CSS3, you can see the default and the fallback in the full image). The main thing I kept from the old mockup is the color scheme.

I’ve still got some final changes to make, like adding a photo in the “about” section, and I need to rework my social media icons. Other than that, I think I’m ready to start coding.

I’m wondering, though, if you have any suggestions? Do you think it’s ready to be coded? Please comment, I appreciate any input. Thanks.

My friend just got a camera. This, of course, prompted me to get back into photography again. This, of course, prompted me to find a new subject for a “Guess What It Is” picture. Guessing ends Wednesday (12/30/09) at noon Eastern.

Please check out the Page of Winners to see our previous winners, and to find out what has been done already.

I’m told that people like lists so here’s a list of ways you can emphasize (or de-emphasize) in your text.

• Bold
• Italic
• Underline
• All caps/Small caps
• Font size
• Font Color

Alright, I’m pretty sure that covers it. You could also throw in exclamation points and parentheses, but I’m aiming to cover the things that actually modify the appearance of your text in this post. The goal with all of these things is to create contrast. You want to make the things you’re trying emphasize stand out. That sounds pretty obvious, but it’s important to understand as we go on.

The problem is that most people try to emphasize too many things. Amateurs will often bold large sections of text, and underline, capitalize, or italicize sections of text within that. The trouble there is that you’ve lost your contrast as soon as you bold a large section of text. Adding even more emphasis within already emphasized text doesn’t help and often only confuses your reader. That’s why it’s important that you use emphasis in your text sparingly. Usually, you can get a similar effect by simply adjusting your wording.

You should use effects like bold only when you think it is really important to point something specific. When you looked at this paragraph, you probably looked at the word “only” first, and then read the sentence which contained it.

Pointing things out in your writing like that should be used sparingly, and it’s good to have a maximum of only one or two emphasized words in each paragraph. Adding more gets confusing or overpowering. Even worse is when you have some things underlines, some things italic, and some things bold. It’s usually best to use emphasis minimally and only use one form of emphasis.

What kind of emphasis should I use?

That’s a good question. The kind of emphasis you use will depend on you medium and the kind of emphasis you want to create. In my mind, using bold is very similar to saying something a little louder and more sternly or passionately. Italics tend to create the appearance of someone very carefully pronouncing each syllable for added clarity. Underline is very similar to bold, but it should never be used on the web. All capital letters will create the the appearance of yelling, and should generally be avoided.

The rules?

I’m always hesitant to write these lists. I’ll attach the same conditions for these rules as I attach to all rules I post here. These rules can be broken if you have a good reason for doing so. They’re more like guidelines for when you’re not sure what you’re doing.

• Don’t combine types of emphasis.
• Don’t emphasize more than a word or two in a sentence.
• Always think twice before using type-modifications to add emphasis, there might be another way.
• Don’t use underlined text on the internet, it makes people think the text is a link.
• Avoid all capital letters.
• Always keep in mind that contrast is what you’re trying to achieve. More contrast = more emphasis (usually)
• Most people like to decide what they read first, taking that control away from them can be annoying.

That’s about all I can think of for now. Remember that if you have any questions, feel free to comment or contact me. I’ll do my best to help you out.

Alright, that one was pretty obvious. I’ll try to make it harder next time. It was an eraser. Larry was the most accurate, but Chris was really the first to get it. He’ll go up on the page of winners soon. Thanks for playing, everyone. Stay tuned for the next picture.

We’re going to tackle each of these over the next few post. Today we’ll just be covering capital letters, or “All Caps”.

CAPITAL LETTERS ARE AWESOME!

If you know anything about typography you can guess why I’m addressing this one first. If you don’t know why I’m addressing this first, hopefully you will soon. Here’s the deal: all capital letters can be used elegantly, but probably not by you. Don’t worry, though, it’s okay. Capital letters are a very hard thing to use well. The problem is that most people think that you should use them to add emphasis. If you look at good design, though, that’s rarely the case.

Why you should avoid all capital letters

Personally, I try to avoid using all-capital letters. Only certain fonts do it well, you usually need to space the letters out more, and it’s very hard to make it look like you’re not yelling. Italic capital letters are especially bad at this. They give the feeling that the text is running and screaming at the same time.

The problem is that the way we read is usually heavily influenced by the height of the letters. In lowercase text you have all sorts of highs and lows. Differences like that aid in reading a great deal. Capital letters (in most fonts), however, are all the same height. This makes it more difficult to read because the text is more blocky and thus less recognizable.

Basic rules

So here are some rules for using all-capital letters. You can break these, but be very careful.

• Don’t use all capital letters.
• If you use all capital letters, only use it for small sections of text.
• If you want to look like your yelling, reconsider yelling; it’s rude.
• Avoid mixing all caps with italic, underlined, or bold text—especially italic.
• All capital letters are best used in headers, avoid using it in body text.

Personally, I rarely use all capital letters. I’ve done it in logo design, and a couple typographic compositions, but I don’t make a habit of it. The big thing about all capital letters is that you need to think it through. If you’re just using them to get attention, try something else. Unless they’re used very carefully, it’s very tacky.

The next post will cover emphasis a bit more broadly, and talk about mixing emphasis methods. I wanted to get all capital letters out of the way because it’s really my biggest pet-peeve.. Stay tuned!