Grow your CSS skills. Land your dream job.

Learning about typography on the web

  • # May 1, 2013 at 1:26 pm

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

    # May 1, 2013 at 1:47 pm

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

    # May 1, 2013 at 2:01 pm

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

    # May 1, 2013 at 6:30 pm

    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?

    # May 1, 2013 at 6:38 pm

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

    # May 1, 2013 at 7:05 pm

    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.

    # May 1, 2013 at 7:16 pm

    @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.

    # May 1, 2013 at 7:31 pm

    > That might be out of my area.

    Was worth a shot :)

    # May 2, 2013 at 2:24 am

    Where should font properties be set? html or body element? I have seen both.
    How do you go about choosing fonts?
    I’d like to see some examples behind the methods of choosing certain margins for headers and paragraphs.

    i would really love to see how to make typography work with RWD.

    like…what changes in the media queries? If I have html set at 100%, or 16px, do I change the html element on media queries? or do I change the font size in the body? Should fonts get bigger as the screen grows, or smaller? etc. etc. I have yet to find a clear article or tutorial on how to make good typography in rwd.

    hope that isn’t too many questions, @chrisburton. Typography has fascinated me lately and I want to understand it better.

    # May 2, 2013 at 10:33 am

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

    # May 2, 2013 at 11:37 am

    @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.

    # May 2, 2013 at 12:03 pm

    awesome. looking forward to it!

    # May 2, 2013 at 3:57 pm

    hey @chrisburton, where is your website anyway? i’d like to read whatever you have.

    # May 2, 2013 at 4:11 pm

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

    http://chrisburton.me

    # May 2, 2013 at 4:40 pm

    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.

Viewing 15 posts - 1 through 15 (of 22 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".