Typographic overhaul on website: line-height, readability etc.

squawk's picture

A couple of days ago I updated my css for my own personal website to make it a little more readable. I removed italics and boldness from all headlines, shrunk the font a little bit in favour of a bigger line-height, etc.

Could you give me some feedback on the readability of the site now? And on the general feel of the site?

The link is squawkdesign.com

writingdesigning's picture

Lovely illustration on the top bar! I fact the top one-third of the page is really nice. Somehow the rest is not working as well as that.

Probably it is an issue of hierarchy. Quite a lot of elements seem to have more or less the same level of prominence that you are not sure what to look at first, what next.

A few suggestions:

:: Relook the text of your intro. While the different definitions of Sqawk are sort of fun, I wonder if it may not be an idea to combine those three levels of intro into one crisp, and if possible amusing :), paragraph of not more than three lines.

:: You might want to introduce some white on the background in the lower half of the page. It's currently a little too monochromatic.

:: Make the screen-shot of the featured project a little smaller. And avoid the project-title running into the thumbnail.

:: The date on the description of the featured projects could perhaps come after the description itself, as against between project name and description.

Good luck!

squawk's picture

writingdesigning : Thanks for the suggestions. I'll try them in Potatoshop to see if it makes a difference. What exactly do you mean by avoiding the project title running into the thumbnail? What browser are you using?

writingdesigning's picture

"What exactly do you mean by avoiding the project title running into the thumbnail?"

I meant that:

But you're right. It's to do with the Opera browser. 'Doesn't seem to happen in IE

squawk's picture

OK, thanks for the clarification... I've thought I tested every browser, but apparently I did forgot Opera... I'll have a look what I can do against that... css-wise...

Florian Hardwig's picture

Hi Dominik,

this is from Safari:

This happens when users specify a minimum font-size. I know, there are not a lot of people who use that option, but I do …

squawk's picture

Florian: I did a little research on Safari's minimum font size. It seems like Safari forces it on the element after all other values have been computed. This means that widths (such as my left padding) are not updated. The only solution would be to stop using ems to specify widths, which I do not want to do... I do not know whether !important would make much of a difference.
What's your opinion? I saw that did some webdesign, so I think it is safe to ask. (even though this is a typography forum.)

EDIT: It seems like there is a way around it: http://www.gunlaug.no/contents/wd_1_03_04.html Just specify the largest font size on the parent and use values smaller than 1em on its children. Does anybody have any experience with this?

Thanks to everybody who pointed up some (obvious) flaws. However, I directed the post more at readability... Any comments on that? :(

Florian Hardwig's picture

What’s your opinion? […] even though this is a typography forum.

Hey, there’s more to typography than letterforms – quite the contrary; positioning, size and interaction of text (and other) elements is what typography in a narrower sense is all about. ;°)

My 2 cents (I hope you find them helpful and constructive):

Building a scalable website is a honourable task – but it’s full of pitfalls, too. So, test-test-test, and don’t assume every user will use the same UAs, fonts and font-sizes.

The only solution would be to stop using ems to specify widths, which I do not want to do
Maybe you have to compromise … Your background image is based on pixels, too – in consequence text runs across the bright vertical sidebar border.
Create true correlations: If you want the sidebar to have a border, specify the border for this very element, not via the background-image for some superior element (‘div id="dock"’).

I see you’re fond of the web standards idea – which is laudable – however have in mind that it’s not the validation engine that wants to be pleased but the human user.

Some concrete points:
Specifying image size in em will preserve proportions, but it implicates uglily blurred images.
Your list item contains a h4 heading, a paragraph (date) and another paragraph. If you want these 3 to align properly, treat them equally! If necessary, wrap them up in a container element. Right now, their aligning is more or less coincidental, depending on the user to retain the defaults (which defaults?).

However, I directed the post more at readability... Any comments on that?
Well, it’s hard to descend to the details if elements overlap … ;°) However:
I find the line-height of h1 quite big.
For the ‘Recent Weblog Entries’ section: Why can’t the titles themselves be clickable? Is it really necessary to have a (to me) distracting extra ‘Read’ link in every single line?

Best regards,

squawk's picture

Thanks Florian, it is nice to get some feedback on this. I'll make some adjustments over the next weekend. What you said about the backgrounds and the scaling of the type when users enlarge the text is definitely true, and I'll have a look how I can fix some of the other issues as well...

Oh, and the Read link will be killed soon as well: Quite a few other people already mentioned that to me and I believe that I wasn't thinking when I put it in;-)

Syndicate content Syndicate content