Learning about typography on the web

[chrisburton]

What are some things you’d like to learn about when it comes to typography on the web?

[slicata]

Are we talking technical (sizing in px vs em, etc.) or theoretical (x character wide line lengths are better for readability, etc.) or both?

[chrisburton]

I’m open to a wide range of topics. I know for some people typography isn’t easy to understand.

[Mottie]

I’m still very naive when it comes to typography. I think the biggest problem I run into is knowing which fonts work well together. Sure there are lists online, but that doesn’t help me understand the underlying reason to choose one font over another. Is there a sound, evidence-based reason, or is it mostly artistic expression and gut-feeling?

[chrisburton]

@Mottie Great question. That is one topic I’m already geared to talk about in one of my articles.

[CrocoDillon]

I’m with the ‘which fonts work well together’ problem, I could apply whatever you’ll write about that straight away on my own website.

And… what makes a font good? I only know the most obvious ones, does it look good at the font size I’m using it for (readability, anti-aliasing mostly… hinting and kerning, that’s about as far as I get now)

Maybe something about rendering but I don’t know if it’s enough to fill an article. I ran into some issues lately about how inline elements are rendered and I think it’s related to typography. I’d like to know the details about rendering as I’m still puzzled by how a span element with font-size 50px (calculated value as the css is in ems) and line-height 1 can result in a height of 71px… yet the parent element ignores that 71px and treats the span correctly as 50px.

[chrisburton]

@Crocodillon Noted. Thanks.

> I’m still puzzled by how a span element with font-size 50px (calculated value as the css is in ems) and line-height 1 can result in a height of 71px… yet the parent element ignores that 71px and treats the span correctly as 50px.

That might be out of my area.

[CrocoDillon]

> That might be out of my area.

Was worth a shot :)

[ChrisP]

I’m with @Mottie and @CrocoDillon on what determines which fonts work well together.

[chrisburton]

@cwork All great questions that could be useful to others as well.

Thanks @ChrisP

Note: Many of these questions will be answered in a set of articles that I’ll be publishing on my website. If there are questions that are very specific which may not be suitable for the articles, I’ll message you to create a discussion on the topic.

[chrisburton]

@cwork It’s under development. I’m really close to publishing it, though.

http://chrisburton.me

[Toph]

Personally typography is something i struggle with a lot. Designers can go through the extensive process of building a website only for it to be ruined by the poor choice of fonts(I’v done it too many times).

I use of Google fonts(especially for developing) helps alot. I know for one i still have a lot to learn.

[CrocoDillon]

> I use of Google fonts

Shhh, don’t let Chris know ;p

[chrisburton]

I was supposed to co-write an article with Jessica Hische on the topic of Google webfonts but I opted out due to a lack of time. I do plan to do one myself on this service but now I’m thinking I’d like to get her perspective on it as well. We’ll see.

@crocodillon ;)

[chrisburton]

@Hompimpa

> Whether this depends on the file size, the operating system or the font shape…

Letterforms and the OS do take effect on legibility for text type but also “Delta Hinting” or “TrueType hinting” help with the rendering at small sizes. There are many articles on this topic around the web, including on Typekit. Because hinting is such a long and tedious process, many opt out of doing it manually and go for a faster (and more horrible outcome) called “auto-hinting”. A lot (not all) of webfonts in Google’s library are auto-hinted. But this is one reason why I don’t take Google webfonts seriously or consider them “true webfonts” as they are not optimized for screen use. Webtype does a fantastic job with their RE series.

[Author]

Posts