opinion on simple design

[JoeShmoe]

Site looks very nice, but IMHO serif fonts are not that great on the web, sans-serif’s are much better (keep in mind, this is MY personal opinion ;))

[chrisburton]

With respect, I very strongly disagree with @JoeShmoe’s opinion. I’m using the same font for a preview of my blog comments on my new site. Georgia is undoubtedly one of the best typefaces ever made for the screen.

[Wahmaster]

I definitely appreciate the thoughts. As for myself I have no hard rules yet on fonts ( I am still just a baby in the artistic side of things). The font types that I am using now are an experiment in mixing sans and serif fonts, with the serif fonts in the headers. There seems to be a lot of sometimes very emotional opinions on font selection which can make it harder to figure out what a target audience would feel good about fontwise.

[chrisburton]

It depends how you use them on your site. What you should really focus on for your users is legibility.

[Wahmaster]

OK, but is legibility subjective at some point?

For example, with some exceptions I don’t see much of a difference in legibility between many fonts. But there are obviously people that notice these things, even to the point of what appears to be pain for fonts that bother them. Is this just a blind spot for me, and if so, how do I correct it?

[chrisburton]

I’m sure certain font-sizes could be subjective. Just like with any development project, you have to test. Well, the same goes with type.

Go here: Cantarell. This was specifically designed to be on a HTC mobile phone. Take a look at the `$` and `@` glyph symbols. Now go down and view the lowercase glyphs. They look horribly pixelated from bad hinting. That’s a poor quality font.

Go here: Apres. This was specifically designed for the Palm Pre. Much higher quality and profound manual hinting.

[Wahmaster]

OK, I see more fuzziness/pixelation on Cantarell in the smaller font sizes, but not so much with Apres. Spacing between letters “appears” to be more consistant and tighter in Apres, though I notice that letter combinations like “ox”, “ew” are also different somehow, perhaps closer together by a pixel like they are tucked together just a tiny bit more.

[elmsoftware]

The font-size is too small for me. I would try 16px as the base font. Make the line-height: 1.6. Tell me what you think?

Check out the link that Chris just posted as a ‘Hot Link’ about [typography](http://www.kaikkonendesign.fi/typography/).

Your site is looking good…I believe some thoughts/ideas from the above ‘Hot Link’ will help you make it more beautiful!

[Wahmaster]

Good Article, thanks!
I may mess with fonts a bit, but for now I upped the font size.

[seeman]

People seem to under estimated the power of simplicity.But i must say just one word “OUTSTANDING”. Thanks for share this amazing article.

[croydon86]

I’m not too keen on the inner shadow and outer shadow on the same elements. This is contradictory. Is it meant to be indented or above the page?

Not really a fan of Myriad for web. Georgia would work well here. Have a look at font squirrel or google web fonts for a good selection of beautiful free typefaces.

Also your padding is inconsistent. Look at the header for example, there is more padding on the left than on the right, almost no padding at the top. The left-aligned body text does not line up with the heading text.

Just a few points there

[Wahmaster]

@jurotek I do have to admit that the font I was playing with looked horrible in blocks of text though I kind of like it in the “logo”. I did not care for as much line height and font size as you recommend but I am starting to agree that a sans-serif font is better in this case. My guess is that a nice serif font would work better in a “classy” design for overall feel.

My thinking on fonts is that they are a lot more powerful then I ever really imagined as a developer, which makes me think that using things like google fonts or other externally loaded fonts can be a very good thing when used correctly.

As for the L/R padding in the section area I increased the padding screen for sizes above 768px to 2em but left it alone in the smaller sizes because I felt there was too much white space in the smaller screen sizes.

@croydon86 I almost like the mixed inner/outer shadows. the overall feel that I am going for is above the page with the headers having the feel of a different material. I am just venturing out in design land and some of my initial thoughts may be a bit colorful/scary.

I did even up the padding in the header and between the article header and the content.

Thanks!

[chrisburton]

Majority of Google’s web fonts render poorly. There are better alternatives when it comes to quality if you’re willing to invest in them.

[knittingfrenzy18]

Hey friend,

It is quite the nice site. It has the functionality and beautiful content choices, as well as nice touches here and there. But, as most have said around here, it looks a little…well…boring and old.

[Joshua Hibbert’s website](http://joshnh.com) may be of inspiration to you. You can observe the very few [solid] colors he’s used and how plain it is, yet very very beautiful. :)

Red

[Wahmaster]

Thanks @knittingfrenzy18

I am already thinking about a new design using what I have learned from some of the great advice that has been given here!

The next version should be less boring.

@Htmlmaniac, I want to keep the breadcrumbs for SEO, but the static text can be changed and the whole thing hidden on the home page. That should do the trick.

THANKS!!

[Author]

Posts