A client asked for clarification on a few suggestions I’d queued for their project. While I don’t offer much background, this article is still informative. Partially edited to protect the innocent.
Typesetting and typography: What are they and should I care?
Typography… I’ll just talk around it a bit. Here’s an old-as-dirt webpage restaurant menu, an mid-aughts example of me trying to do something neat with fonts, layouts and spacing. It’s from more than a few years ago and I was on a tight budget. While it’s far from perfect, it uses fonts, font sizes, font colors, font spacing, kerning, justification, etc. in an attempt to present information in a sensible and easy-to-read format.
The example cited even conveys some subtle branding – with the Italian color scheme. We could display the same information with stock fonts, excess centering, stock (black) colors, etc., and it would look different… worse. The information conveyed wouldn’t be as attractive. Visitors would read it less, and other nastiness!
Another Typography Example
Go to your bookshelf. (Future Dan chiming in: Do people still have those?) Grab a paperback from the 1960’s and then grab the most recent hardcover book you can find. Open them to page 50. Read a few lines from each book. What’s the difference? Typesetting’s come a long way in a few decades. Books are much easier to read now.
What about words per line on webpages?
Yes. It matters. Even Google cares. People don’t comprehend as well or as quickly when there are too many words on a line of text. Readability suffers. It’s better to tighten margins and/or enlarge the font-size than to use ultra-long lines of text. What are best practices for words per line on webpages? Click the link!
So, using typography, we can better present the information on your site. We do this using CSS Cascading Style Sheets to define the spacing and other font and text attributes.
There’s something you can do to help the web readability effort. Write more sub-headlines to break up text.
Using HTML headlines helps both humans and robots
I’ll pick a random page:
https://www.mygovspending.com/gearbox/GovtDeficitAndDebt
Ah, not the *best* example, but I’ll use it nonetheless. A page with fewer headlines would’ve been better, but in one sense, this is actually better; it shows how we can improve on a good start.
Between these two headlines…
“A Shot at Quantifying Comprehensive Taxpayer Liability”
and
“Can government debt be a good thing?”
…we have a whole bunch of text. And while there’s a chart and a magazine-style pull quote box, it still needs more segmentation. What’s there would suffice for a textbook or even a newspaper, but more headlines are the norm for web content where it’s so easy to lose a reader’s attention to countless other sites.
e.g. I picked a random article from smart money
http://www.smartmoney.com/investing/economy/the-other-consumer-confidence-index/ (Future Dan noting link is dead and not archived anywhere)
There’s a headline an average of every two paragraphs.
This is not just good for readability, keeping readers hooked, helping readers find what they want in a page and etc, it’s also good for SEO. Robots love this sh*t! HTML headlines are our opportunity to present a better page outline to the search engine spiders.
Headlines should often be accurately descriptive more so than catchy. If they’re both, that’s even better.
How about a segue?
As a neat tangent, and segue, think about the links you see when you visit a site. The call to action, “Click Here!” was once the norm. But then some genius realized that presenting the user with a dozen links on a page, all with the anchor text “Click here!”, all going to different pages… was a bad idea.
What are good links made of?
So, as well as providing better, more obvious information to readers about where a link will take them, descriptive link anchor text is also valuable for those search engine bots too. The anchor text that you use to link to your pages, and even more so, the anchor text that third parties use when linking to your pages, tells Google a whole bunch about how it should rank your site.
The BEST links are:
- from another site to yours
- on a page that has high page rank (PR)
- on a page with content closely related to yours
- without link reciprocity (e.g. w/out you linking back)
- hosted on a different server, different domain registrar info, etc.
How do I get incoming links?
But getting the best links is VERY hard. So we just get as close as we can. For SEO, I’d say the PR is the most important variable.
How do we get links?
- Ask nicely (ultra low success rate)
- Offer to trade links (also pretty low)
- Buy them (expensive and frowned upon by Google)
- Do some press releases (hope for links)
- Befriend bloggers, e.g. hook them up w/ a free account (hope for links and/or a review)
- Other networking (hope for / trade for links)
- Etc.
We could compile a list of the top twenty or so bloggers in your field and compose a very short email to them. “Hey, check out my mad-crazy site, yo! I’ll hook you up with a free account.” …and you can send them off with a personal touch.
What is Google Page Rank? How do I measure it?
(Decade in the future Dan chiming in: GPR is largely deprecated these days.) Google pagerank is best explained by those who’ve already typed it: http://en.wikipedia.org/wiki/PageRank
I use to use a Firefox page rank plugin to tell me the PR of any page I visit. But you can also use web tools like this one
http://www.prchecker.info/check_page_rank.php
W3C Page Validation
The W3C link at the bottom relates to web standards. The closer you are to meeting them, the more people (e.g. w/ disabilities) and robots (e.g. Google’s) are able to make sense of your content. It’s otherwise advisable to get your code up to specifications too. If you need more convincing, please Google for myriad reasons.
Whew! This took a while to type, but it’s worth it.
Dan Dreifort
Dan Dreifort is a SEO UX consultant… and he’s working on becoming an efficiency consultant too. He just bought fficient.com in the hopes that it will some day become the web home of his efficiency consulting wing. Yeah, he’s like a bird.