feedback on the type on my website.

laniblaze's picture

can you guys please give me some feedback on the type on my blog? I have no idea what I am doing.

ignore the lowercase and the bad writing. thanks. :)

Claire Bibio's picture

BIG LETTER SIZE. Go for 11-13 px.

Té Rowan's picture

Why? Do we need yet another unreadable website?

Arno Enslin's picture

The big size actually lowers the readability here (96 ppi). The leading should be increased. You declare font-sizes 48 times in your css. This is too much. You make excessive use of classes and IDs. Are they really all necessary?

Té Rowan's picture

@Arne: Just lean back. It's good for your eyes.

But, yes, the body text needs a kick in the line-height parameter. It's 4px under the font-size right now, causing ascenders and descenders to tangle.

Wonder if folk will ever figure out that setting font sizes in px will bite them in the fluffbunny on multi-hundred-dpi displays...

maxgraphic's picture

Well, they may or they may not, depending on how intelligent the browser is. 12px on a 96 dpi (standard) display should be scaled to 38px on a 300 dpi display. There's no reason px has to map to actual device pixels.

For example, with Apple's double-resolution "Retina" display, px doesn't map to pixels anymore. And of course it never really did since Mobile Safari scales the page in various ways as the user manipulates it.

Té Rowan's picture

I don't know if I'm too tired or not, but the W3C's px unit looks like an effin mess to me. The pathological case would be that 1px should jump to five actual pixels in length if I moved to a coupla fathoms away from the display.

I need a beer.

laniblaze's picture

I like the larger font size myself, but I think it does look better small, sad to say. For example the replies here. That is a nice looking font and size, but I want my website font bigger.

I found this and was trying to implement some of what the person is saying.

Arno, it a template, I'm just editing it. I'll go in and clean up the CSS though, I figured it needed to be that way.

I'll change all the fonts from px to em. I never use the em because it seems to make everything HUGE and I don't understand it. I'll read up on it. What should the line-height be in relation to the em? If the font size is 1em what should the leading be?


jabez's picture

If you were going for the 'blocks of glyphs' look to discourage people from reading the content, you nailed it :)
Wouldn't hurt to check out

laniblaze's picture

jabez is funny! ;)

ok, I changed my site a bit.
The nytimes uses px btw. :)

Té Rowan's picture

On my private pages I use mm (millimetres), an absolute size. Mind, they are mostly a fanfic library, so the expectation that 4.23mm (12pt) remain 4.23mm nomatter if your display unit resolves 3.8dpmm (~96dpi) or 47dpmm (~1200dpi) sounds reasonable to me.

The em is a relative size. 1em is 100% of the parent's font-size parameter.

Btw: I copied your page onto my machine, then went... playful... on it.

1. I copied the 'font-family' from 'body' to '.entry', then changed the one in 'body' to be an Arial/Helvetica/sans-serif catch-all. In 'body' I also dropped 'line-height'.
2. To 'font'family' in '.entry' I added Droid Serif and Nimrod, both of which are tall-x types that put up with a font-size of 13px.
3. I added 'font-style: normal' to '.entry p:first-child:first-letter' since I preferred to see the cap upright.

Just for the hack, I then tried it with the freely-available (and GPLed) ADF types:
1. Added 'Gillius ADF' to '.smallheadline1', '.smallheadline2' and '#menu a'.
2. Added 'Tribun ADF Std' to ',entry' and upped 'font-size' to 14px.
3. Added 'Tribun ADF Std' to '#content div .largeheadline'.
4. Added 'Tribun ADF Std Cond' to '#blogtitle h2' and '#tag'.
5. Added 'Universalis ADF Std' to 'body'.
6. Added an '.entry blockquote' subsection:

.entry p:first-child::first-letter {
font-style: normal;
font-size: 3.571em;
line-height: 0.76em;
padding: 0.04em 0.08em 0 0;
color: #C00;
float: left;
.entry blockquote {
font-family: "Ikarius ADF No2 Std";
.entry blockquote p:first-child::first-letter {
font-size: 2.571em;

FYI, Gillius is a Gill Sans look-a-like, Tribun resembles Times and Universalis has a Futura flavour. Not sure about Ikarius.

Syndicate content Syndicate content