can you guys please give me some feedback on the type on my blog? I have no idea what I am doing. http://bit.ly/ifhd6T
ignore the lowercase and the bad writing. thanks. :)
can you guys please give me some feedback on the type on my blog? I have no idea what I am doing. http://bit.ly/ifhd6T
ignore the lowercase and the bad writing. thanks. :)
@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...
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.
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.
http://www.threestyles.com/tutorials/css-tips-for-better-typography/
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?
Thanks!
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 http://www.nytimes.com/
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.
Captured from commoncrawl.org on 19 Apr 2015. original URL