The Runecrypt Graphics Blog

When it comes to web editing, especially in sites where most of the material is entered as raw text, it’s important to know exactly how you want the site to look like before you approach any line of code.

In my experience with all kinds of sites and technologies, CSS is the best way to control all your styling and for those of you who are planing to build a new site is an essential syntax to perfect. It’s easy, quick, and very, very powerful. For those who don’t know CSS stands from Cascading Style Sheets, and it’s a client side code that basically integrates styles into the HTML code of the file. This allows you to easily control your editing from outside the HTML file itself, leaving the content untouched while you change all the styles. In some places CSS can even replace special Javascript codes, but that is really dependent on the browser.

First of all I’ll explain a bit about the issues you’ll get into when you go into web editing. System and browser support, overall legibility and such.

Fonts of the Internet

not all fonts are supported by all computers simply because they require the base *.fon or *.ttf font file, and they generally vary between different Os’s. What was done to make it all easier when it came to HTTP and the world-wide-web is simply to allow the fonts to be chosen from a family rather than a specific font. For instance, let’s say I want a page to use Arial font, but I can’t trust that every computer on earth has the Arial font file, so what I will do is assign the priority of fonts I would like to be used in the page: i.e. Arial > Sans Serif.

Generally it’s accepted to use, and are available on all default mac and win, can be found here: http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

Basically what this allows us to do is control the font more freely, without getting stuck with the default web browser’s font.

How to do it in CSS:

basically in CSS the syntax is [#] [.] tag [:status] { name: value; name2: valu…}

Where the Hash sign stands for group, the dot for class and without any is just a regular pre-set HTML tag and the :status is used for the status that element is in (for instance: a:hover – works for anchors which the user hovers on, also known as Mouse Over Link).

The line of code I talked about earlier will look like this for the <p> (paragraph tag in HTML):

P {

font-family: Arial, Sans-serif;

}

Thats it, it’s that simple. And of course you could be more accurate and continue on with other fonts before it reaches the default Sans font, just by adding more common font names separated by commas

in that same way: font-family: Arial, Helvetica, Verdana, Sans-serif;

Browser support of styling – CSS warning!

The CSS classes and ways to edit a web page have grown so much you’ll always need a go-to guide to find exactly what you need and how to use it. I suggest the W3 School CSS site – basically, it has everything.

Thing is, not all of those classes work with all of the internet browsers: IE and all its versions, Netscape, Mozilla Firefox, Oprah and others. You’ll need either to check with the CSS class listing to see if it fits the requirements, usually you’ll want it to work with IE 6 and up, Firefox 2 and up and Netscape 6.1 and up – but the more, the merrier!

The general rules of thumb, yes we have 3 thumbs…

Sure any site is different and it should be your creative outlet, but there are usually a few ways that work well when you need to handle large amounts of text. These work on the font itself, the composition and the dosage.

Font-wise, as you can see today most sites use some kind of sans-serif font, either Arial, Helvetica or Verdana – all of which look differently in different color schemes and amounts.

Arial and Helvetica being neo-grotesque and grotesque are very close together, the stroke width in comparison to the point-size and x-height is much smaller, where as Verdana is much sleeker, its more round overall and thus looks good in smaller amounts of text. Of course you can always use Serif fonts and thats usually used in more article-oriented sites. Heavy text looks much more professional when it comes in serif.

When it comes to how you block the text is again important to look at how much body the character has in comparison to it’s point-size. The fuller it is, the less I’d suggest it’d be in a full block format. Full block is generally when you use justified alignment. Blocking Verdana is much better though, since it already has a very geometric feel to it. So when you have a structured table with space for a small amount of text, you should stick to justified Verdana, but remember that the same font is suggested to be kept throughout the site (except for menus or logos which can be something different but you should really keep it simple and straight.

Getting the general paging is important as well, I mentioned some about paging in the first part but here’s the general workout when it comes down to HTML. The most important rule of non-articular text is to keep it properly composed. By that I mean: work the page more towards the style you want – and use a lot of tables to get it straight.

On the other hand you have more article-oriented writing such as blogs or news sites that have a lot of text stacked. What you’ll want to do here is actually keep it straight and use more CSS and code to format rather than tables. It’s much similar to working with MS Word or any other text editor – and this might sound pretty simple but it’s not. Here’s how you keep a clean page, step by step:

1. Write correctly: use paragraphs with key sentences and connectors with in the paragraph itself and between the paragraphs.

2. Post editing: make sure you use a good size and family font and make sure you either oblique or italic the emphasizes, make your examples stand out and such, and create levels of headers.

3. Code like a professional: When you code the body itself make sure you use the <p> tags for each paragraph and all the <em> tags for emphasizes and the <h#> tags – remember you can edit exactly how each one looks in the CSS later.

4. Adding images and illustrations: Use the CSS to make the image as a float image – when embedding an image add a style property “style=’float: left;’” (or right, whatever suites you). Experiment with the CSS’ endless ability to prefect your system.

Summary

When it comes down to the text you put on your website, just remember what it’s used for. Is it an article? Is it an ad? Is it a catchphrase? Keep it professional, simple and clean, or go wild, as long as it fills you’re need.

As to these articles, that’s basically it, I hope you learned at least one thing, cause goddamn it I know I have. The text has a lot of meaning besides the words themselves; when you take a page you look at the black and the white, at how much white there is next and away from the black and how much words you put into it. No matter what you want to say, or in whichever media: print, pixel or painted, just make sure you don’t mess it up.

Tags: Article