design tutorial: clean body text in your posts

I have made some deliberately unaligned body text and taken several snapshots which I combined for a tutorial. Looks really ugly folks! :-P:

To get to the tutorial, please click on the image and read the annotations.

.................................................................................................................................

"handwritten" fonts

I was going over my student's homework blogs and there seem to be quite a few of them who want to use handwritten fonts for post titles and headers. (Quite a few available on the blogspot template editor - ouch!).

Most graphic designers will probably agree that for the largest part handwritten fonts are problematic design elements. And the reason is pretty much right there in the word "handwritten". Well let's face it, they are not, are they? They are artificial constructions which try to imitate something that is quite impossible to imitate since it is so organically individuated.

When we write we follow a personal rhythm; so personal in fact that handwriting is considered to be forensic evidence, just like a fingerprint: We never ever duplicate the same exact shapes; the way we write individual letters depends entirely on the letters standing next to them - each one we shape, link up and place differently.

Handwritten fonts, on the other hand, link or place the (same shaped) "a" in exactly the same way, regardless of whether this "a" is standing next to a "t" or an "m" or an "r". And so what comes out, in most cases ends up looking rather phony, I'm afraid. There are lots of different handwritten fonts to choose from, of course - but not that many are well made enough to be able to get over this inherent limitation of being imitators. Flight (below) is one such good one, I think:

 Note:  And then there are also "script" or "calligraphic" fonts, which should not be confused with "handwritten" fonts at all. These fonts are based upon historic engraver's texts where each letter does in fact follow the same exact rules, is linked similarly, if not indeed identically to the ones standing next to it. So, these fonts usually do look very sleek and find very good usage within the proper context. Below are three nice ones which you can get from dafont.  ) 

.................................................................................................................................

playing around with (HTML) type

I haven't really been looking too carefully at the compose tab when I am entering a post, I guess. Just noticed now that (unlike wordpress) blogspot allows you to change the fonts and sizes of bits inside the text intuitively.

Great news! Means you can have custom designed block quotes on your posts, without having to write too much code! (The default block quote command does not look too clever since it pushes the text inside, so it is usually quite tough to get things correctly aligned with it).

Of course, one would need to be very careful when doing any of this because it might end up looking absolutely awful if you don't get it right. Still, I cannot resist and am trying one out right now. The body text on this blog is Arial so I will use Times New Roman to get a nice contrast between sans-serif and serif. Usually works very well - especially if serif is also set in italic:

______________________________

And now I will make this quite big, so that it really stands out from the body text.

______________________________

Since this is a special element, a strong color should be OK to use for type: So, I made this a dark blue for added accentuation. Now, I will go back to the regular font size/color and write some more, so that I have enough text to fill the post - a block quote needs a lot of text to nest inside properly. Notice that I also added lines to top and bottom to give it even more definition. While the body text is justified, the big text is flush left since at such a big size it would be very difficult to justify the type and not get "white rivers", which are the lines that run through and break up body text vertically. Very clumsy whenever that happens...

Although I started out on the compose tab I ended up tweaking the code in the HTML tab of the post editor quite a bit: Changed the font size from x-large to a pixel value, and also I changed the line height with an added <div> tag. So, here is what the code for this ended up looking like (the stuff that I added/tweaked is marked up in black):

<div style="line-height: 30px;"><i><span class="Apple-style-span" style="color: black; font-family: 'Times New Roman', serif; font-size: 38px;">And now I will make this quite big so that it really stands out from the body text.</span></i></div>

.................................................................................................................................

HTML codes for the ASCII

or simply put, how to get any symbol, letter etc. to show up properly on your website.

Writing simple blocks of text into your site is no problem at all, but what happens if you want to use symbols or letters such as; ¢, ¥, ¼, æ...

On some platforms such as Blogspot, you are in luck, you can open your character map or search the web for the symbol you want to use (which is a huge waste of time) copy/paste it and there it is. However you won't be so lucky if you decide to hard-code your website which will result in these symbols appearing jumbled up when you put them online. So here is the solution for both coders and those who don't want to waste precious time looking up the symbol.

Go to this link: http://www.ascii.cl/htmlcodes.htm

Look up the symbol you want and copy either the html-name or html-number (both works) and paste it into your code to wherever you want it to be.

This next part is for those who will use it on Blogspot: While you are on the "New Post" or "Edit Post" Screen, where you have the title box and the text box, there are 2 options towards the top-right end of the text box; originally you always have Compose selected. Whenever you are going to paste one of these codes, select Edit HTML and paste it, then return to Compose and it should be there. You can keep on writing normally back in Compose and switch back and forth whenever you want.

.................................................................................................................................