Anyway I should give credit where it’s due. The new theme is built off of the Carrington JAM framework which was really a huge time-saver even though it took me forever to learn it.

I’m not done yet. I plan to adjust the typography a bit (new CSS3 @font-face fonts), swap out the images in the middle column (bookmark), and probably lengthen the far right column to add some more content… plus a bunch of other minor changes. I’ve also gotta make the site work in IE7 (it works okay in 8, and I’m not even gonna try for 6). Yeah, I’m lazy.

Anyway, let me know what you think in the comments below.

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/01/13/mw2-clan-website/ 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.

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.

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.

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!

I told you I’d be writing more frequently! I even intend to get back to work on my digital photography series soon. Today we’re going to look at the differences between serif and sans-serif fonts. We’ve got a lot of work to do, so let’s get started.

What the heck does serif mean?

I dislike French as much as the next guy, but we’ll get into it real quick here. The actual meaning of the word ’serif’ is uncertain. Some people think it means ‘line’ or ’stroke’ since that’s what it basically is. ‘Sans’ comes from the French and means ‘without’. Basically, serifs are little lines or strokes in the letter-form that really don’t need to be there. Serifs are added to letter-forms for decoration or to increase readability. That means a sans-serif font is a font without those things.

Some common examples of serif fonts include Times New Roman, Georgia, and Garamond. Examples of sans-serif fonts include Arial, Tahoma, and Calibri. Usually the differences are obvious, but in the example at the top of this page, it’s not so obvious. That’s because I used a (free) font called Fontin and a font called Fontin Sans. They’re very similar. If you look closely, though, especially at the letter ‘n’, there’s a difference. The serif font is more… frilly.

Why should I care?

Serif vs. Sans-Serif is one of the largest and most common differences between fonts. When you are picking a font to convey a certain style or emotion, serif vs. sans-serif can be an extremely important decision. It’s kind of like clothing. You wouldn’t wear a bow tie while skate-boarding, and you wouldn’t wear a bandanna to a fancy ball. Sans-serif fonts are appropriate in some places, and serif fonts are appropriate in others. The key is learning to use them properly.

Okay, how do I use them properly?

I’m glad you asked. I’m going to oversimplify here a bit, because I don’t want to overwhelm you with information. There’s a lot that goes into picking a font. All of the tips I’m about to give you can be ignored if you know what you’re doing. Since you’re reading this, though, I’m guessing you don’t know a lot about picking fonts.

Sans-Serif Fonts

Sans-serif fonts tend to look a bit more modern. This impression, though, is not accurate. Examples of sans-serif fonts date back to as early as 500BC. It was not until recently, however, that they were used extensively in digital media. It was not uncommon to view webpages made entirely with serif fonts 15 years ago. Thus, when you are trying to make something look more modern, it may be wise to use a sans-serif font.

Sans-serif fonts are also easier to work with, in general, because they are less complicated. You don’t have to worry about all the little frilly things getting tangled up in each other. For someone looking to put together a short document or composition, I would tend to recommend using a sans-serif font. It can save time and effort.

Serif fonts

Serif fonts generally look more elegant, at least when used properly. While many sans-serif fonts are simply utilitarian, serif fonts tend to look more designed. While this is not universally true of all fonts, it is often the case. Most people would say that Times New Roman is prettier than Arial. The added complexity adds a level of beauty and complication.

You’re going to have to weigh the cost of the time it takes to properly use a serif font (picking good and appropriate one, and adjusting it as needed… which we’ll cover in future posts) against the added beauty and intricacy gained of using said serif font. This is actually also true of sans-serif fonts as well, but I know I tend to notice it far more often when using serif fonts.

One other important difference between serif and sans serif fonts is one that may or may not exist. It is believed by many people that serif fonts assist the reader in his reading by guiding the eye from letter to letter. There are also those who disagree, saying that increased readability of serif fonts in large bodies of text is a myth. Personally, I don’t know. I tend to use serif fonts if I’m writing a large amount of text. I don’t know if it helps readability, but I think it does look better. It also keeps me from getting complaints.

Your medium

I almost forgot to mention this. Your medium is extremely important when choosing your font. Digital displays tend to be much lower quality than paper. That means that the subtle details in serif fonts tend to get lost. They can even cause confusion and eye strain. Serif fonts are fine on digital displays in larger sizes, and can be okay in smaller(ish) sizes on digital displays when properly antialased (which we’ll also cover in a future post). In general, serif fonts will look much better on paper.

So which one should I use?

I’m not actually going to answer that. [cue evil laugh]. Choosing a font is a matter of taste, and requires great care. There is no one solution. Your project will require different things based on what you’re trying to do. I hope that the information I’ve presented in this post will assist you in making the proper choice.

Just give me some general guidelines, you ramble too much.

Okay, it’s impossible to ramble in a list, right? Here are some tips.

• Don’t use small serif fonts if your text is only going to be displayed on monitors.
• Don’t use sans-serif fonts for large amounts of text without using headings.
• Try using a serif font for headings and a sans-serif font for body text… or vice versa.
• Use serif fonts to produce a more modern look.
• Use sans serif fonts to produce a more classical look.

I really didn’t want to do that, because some of the tips should often be ignored. They are general guidelines, and oversimplified to say the least. They may, however, make a decent starting point. The best way to learn is to study good typography, and practice creating your own… a lot.

Go forth and practice!

That’s why I’m starting a new series entitled “Text, Fonts, and Typography”. It’ll be somewhere in the neighborhood of a dozen posts (possibly more), and it will talk about typography and fonts, mostly. It may also include some things about text, and by text I mean altering writing to fit your typography.

Communication is an art

Well, at least it should be. A lot of people write papers, blog posts, or other things and only focus on one aspect. The trouble is that there are many aspects to communication (written or otherwise). When you’re speaking you need to take into account things like your tempo, volume, pitch, and more. Otherwise people will find it harder to listen to you. As you get more into speaking you learn to modify your speech to fit what you’re talking about. That’s what makes people really tune in, because you sound like you care what you’re talking about.

Written communication is the same way. I’m by no means a writer, but I do know a little bit about it. It’s important that you work on not only the words and sentence structure you use, but also how it looks. Many good papers have been ruined because the author chose to use his “favorite font” (usually Comic Sans or something equally as overused). Picking the wrong font (or using a good one poorly) can cause a college-level science essay to look like a 3rd graders book report.

Here we go!

Don’t worry. This is exactly the problem I plan on addressing. We’ll talk about things like serif vs sans-serif, line-height, kerning, tracking, headers, body text, and more. I’m hoping not only to teach you things as we go, but also to learn myself. Stay tuned for more!

Latest theme mockup

I probably have an extra “new” up there. I’ve changed themes a few times, though, since I started this Blog. I figured I’d poke a little fun at myself. Anyway, the new theme is based off of the wireframe you’re currently looking at (well, you were when this post was made, anyway).

It features some of the orange-and-blue coloring that CookieofDoom.com has long been known for. This template is a bit darker and more subtle, though. It uses contrast to draw attention to the content, rather than a super-strong orange that makes you run away from your monitor.

Anyway, it’s still an unfinished Photoshop mock-up, so it’ll be a while before you see it live. There’s also a life-sized preview. Comments are appreciated.

The website right now looks a lot like my wireframe. That’s because it basically is my wireframe. It was fast and easy to code, lightweight, and minimalistic.

I was originally going to add all sorts of stuff to it, but then I thought… Who has a wireframe as their blog theme? This makes me unique. That’s a pretty lousy excuse, I know. I am planning on making a new theme from the wireframe at some point. I’ve put this up so I could have my own theme up, and to encourage me to finish the design and coding on the final version.

Consider this cookieofdoom.com version 2.0a. Check back soon to see more progress. If you don’t see any for a while, you can comment and tell me to get to work.