Making Your Blog Readable How to make text and columns larger in Blogger

Tired of skinny columns of tiny text in your blog? I guarantee you, your readers probably are.

A few short hacks in your Blogger template are all that's necessary to make your blog much more readable. As in, small changes in six lines. Sound good? Okay, here goes:

First, you'll have to go to the template tab in the management section of your blog. Choose "Edit HTML." The first, best thing to do here is to back up your present template. Click "Download Full Template" and save it somewhere on your present computer. This way, you can get back to square one if you mess something up.

Now, scroll down in the template code until you come to a section that looks something like this:

body {
  background:$bgcolor;
  margin:0;
  color:$textcolor;
  font:x-small "Trebuchet MS", Trebuchet, Verdana, Sans-Serif;
  font-size/* */:/**/small;
  font-size: /**/small;
  text-align: center;
  }

I'm using the Blogger Beta version of the Minima Blue template; yours might look somewhat different. See the three lines that have either x-small or small in them? That's what makes your text so tiny. Change all of them to medium, so that your code looks like this:

body {
  background:$bgcolor;
  margin:0;
  color:$textcolor;
  font:medium "Trebuchet MS", Trebuchet, Verdana, Sans-Serif;
  font-size/* */:/**/medium;
  font-size: /**/medium;
  text-align: center;
  }

Your readers, incidentally, can change the text size themselves, either by using the "View > Text Size" drop down menus in Explorer, or by hitting "Ctrl-plus" (i.e., "Ctrl-=") or "Ctrl-minus" in Firefox. (Sorry, if you're using other browsers, I can't help you.) So there's really no reason on a website to make the main text size anything other than "medium."

Anyway, now that you've got the text to a readable size, you're going to want to change the column sizes. Scroll further down until you see a section that looks like this:

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
  width: 660px;
  margin:0 auto;
  padding:10px;
  text-align:left;
  font: $bodyfont;
  }

#main-wrapper {
  width: 410px;
  float: left;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  }

#sidebar-wrapper {
  width: 220px;
  float: right;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}

(If you're using the older Blogger, you'll be looking for a section entitled "Content" instead. I don't want to reproduce that code here, to avoid confusion.) See the lines that say width: and then have a number with px after it? These lines specify the overall width of your blog, the width of your main text, and the width of your sidebar, respectively, as a number of pixels (px).

The number of pixels is relatively small because older monitors had a low screen resolution; a larger number could potentially make your blog too wide, with text running off the sides of the screen so your blog would difficult or impossible to read. The crazy thing is, the widths don't need to be specified as a number of pixels at all; they can be specified as a percentage of screen size. That makes a lot more sense, since you don't know the screen sizes of your readers' monitors. If you specify percentages, your blog will resize itself to fit all your readers' screen sizes automatically. Cool, huh?

So each of these three numbers has to be changed to a percent. It's best not to add up to a full 100%, so you have some space between columns and at the edges of the screen. Here's how mine looks:

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
  width: 90%;
  margin:0 auto;
  padding:10px;
  text-align:left;
  font: $bodyfont;
  }

#main-wrapper {
  width: 70%;
  float: left;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  }

#sidebar-wrapper {
  width: 25%;
  float: right;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}

And that's it. Really. You've got your text and the widths of your columns set; with those six minor changes, you've just overhauled the whole look of your blog. If you like how it looks, this would be a good time to save it and download another backup of your template.

Now in my case, I decided that I wanted my sidebar content and my comments to be in a text a bit smaller than the text of the main posts. No problem. Scrolling further down to the section that deals with comments, look for code that looks like this:

#comments-block {
  margin:1em 0 1.5em;
  line-height:1.6em;
  }

This time you need to actually add in a line that specifies the type size for comments to be small. Here it is:

#comments-block {
  margin:1em 0 1.5em;
  line-height:1.6em;
  font-size: small;
  }

Now do the same thing to the sidebar content. Here's the code you're looking for:

.sidebar li {
  margin:0;
  padding:0 0 .25em 15px;
  text-indent:-15px;
  line-height:1.5em;
  }

Add in the same line as above:

.sidebar li {
  margin:0;
  padding:0 0 .25em 15px;
  text-indent:-15px;
  line-height:1.5em;
  font-size: small;
  }

And there you have it!

Well, that's it. Give it a shot and spread the word. Readable blogs are only a few short keystrokes away!