Grow your CSS skills. Land your dream job.

Critique typography on my article. What do you think?

  • # August 1, 2014 at 6:30 pm

    Hi I am trying to put nice pairings of typography on my website. So This article that I am posting from my website is a good example of how I want to make the rest of my following articles look typography ,font size, and font weight wise.

    1. The Main Post Heading is Robto (weight 700, size 32px)
    2. The intro paragraph text is Robto Slab (weight 400, size 18px)
    3. The paragraph headers are Lato (weight 500, size 22.5px)
    4. The body text is Open Sans (size 14px).

    My website article is : http://iamdentistry.com/archive/dentistry/bad-tooth-habits-watch/

    Please tell me if you think it looks good and any advice is welcomed. Thank you

    NIX
    # August 1, 2014 at 7:32 pm

    Paging the resident typophile. @Chrisburton?

    # August 2, 2014 at 7:21 am

    Not home. Will take a look later on. Thanks @Joe_Temp.

    NIX
    # August 2, 2014 at 10:31 am

    Word.

    # August 2, 2014 at 12:15 pm

    @ian.izaguirre001 Try something like this

    # August 2, 2014 at 5:11 pm

    @Chrisburton , Hi thank you for helping me. But on typecast I see the font style , weight , size etc through firebug But when I use the same font size on my website that you set through type cast ( you can see this by going to the article and putting in the same code you did in type cast) the font sizes are way to large for my website as it looks really out of place. So what do you reccomend for font size?

    And I noticed that you use only Open Sans and kept the Robot Slab for the intro text but got rid of the Roboto and Lato. Is this because in your opinion it does not flow right? Are you two font picks , being simpler as they are only 2, more appealing ?

    # August 2, 2014 at 5:26 pm

    Check back tomorrow (maybe later on tonight) for my answers to your questions.

    # August 3, 2014 at 1:42 pm

    First, I should have taken more time with your question. I would actually not use Roboto (Slab or Roman) at all. Although it has improved since V1, it’s still not what I would consider an adequate UI typeface.

    Is this because in your opinion it does not flow right?

    Yes and there was no significance for which to use 3 different sans-serif typefaces. Open Sans is a great UI typeface and comes in many weights.

    Therefore, I think you might be better off using Adelle (slab typeface) with Open Sans and do away with Roboto altogether.

    In addition to that, you have a lot of unnecessary white-space that you need to work out (sidebar, right side of your logo, end of your article, etc).

    # August 3, 2014 at 4:31 pm

    @Chrisburton , Do you have another recommendation besides Adelle , because Adelle is not in Google fonts so it will be easier to have one from there so i can load it from the header ? and this new font that you will recommend is to be applied to the intro paragraph text that used to be roboto slab, correct ? or is this new recommendation to replace the header ?

    # August 4, 2014 at 2:32 am

    @ian.izaguirre001 I would like to recommend Droid, which is in Google Webfonts, and comes in a serif and sans-serif version. For a paid alternative the new Brando for slab-serif (hybrid), … so good.

    # August 4, 2014 at 10:35 am

    because Adelle is not in Google fonts so it will be easier to have one from there so i can load it from the header ?

    You can do that with Typekit as well. I chose Adelle because it seems like you are not willing to pay for webfonts. I believe Adelle might be (not sure) in the free list of webfonts you get when you sign up for a Typekit account.

    # August 4, 2014 at 4:54 pm

    @Chrisburton , Thank you for that help. Yes I just put Adelle on my website. Can you re-look at my article example now: http://iamdentistry.com/archive/dentistry/bad-tooth-habits-watch/ , and tell me if the following looks good to you and if it does not then what you think I should change it to :

    The Main Article Header :

    color: rgba(51, 51, 51, 1);
        font-family: adelle,sans-serif !important;
        font-size: 32px !important;
        font-style: normal !important;
        font-weight: 900 !important;
        line-height: 1.1em;
        margin-bottom: 25px !important;
        text-transform: capitalize !important;

    The Intro-Paragraph line :

    div.dental-textbodyintroline {
        background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
        color: #333;
        font-family: 'Open Sans',sans-serif;
        font-size: 18px;
        font-weight: 400;
        line-height: 1.45;
    }

    The Body Paragraph Headers :

    h3.dentaltext-bodyheader {
        color: rgba(51, 51, 51, 1);
        font-family: "Open Sans",sans-serif !important;
        font-size: 1.5em;
        font-style: normal;
        font-weight: 600 !important;
        line-height: 1.6em;
        text-transform: capitalize;
    }

    The Body Text :

    span.dental-textbody {
        background: none repeat scroll 0 0 #ffffff;
        color: #333;
        font-family: 'Open Sans',sans-serif;
        font-size: 14px;
        line-height: 1.45;
    }
    # August 4, 2014 at 4:59 pm

    Adelle should be for the intro text. But to reiterate, I’d work on the white-space problem as well.

    # August 5, 2014 at 5:07 pm

    @Chrisburton , Hi thank you again. So you can recheck the article now and see through firebug that I have fixed that font family mix up. now , :

    1.) Regarding your white space comment- “(sidebar, right side of your logo, end of your article, etc). ” ——-> The Sidebar has a Google Adsense Ad, and I also have a Google Adsense Ad by the right side of my website header logo ? Does this not show on your browser? Maybe you have an add block on it ? And at the end of my article there is white space but I think this is mainly because of my “End of article question” that I present for the reader to engage in the comments. Do you have a recommendation to improve that if you think it is cause by the question ?

    2.) Do the different parts of my article’s Font-size’s look good, like they flow together ?

    # August 5, 2014 at 5:57 pm

    So you can recheck

    Eh. I’m not liking the weight of Adelle against the body text. I would invest in this book that just came out by former Art Director at Typekit, Jason Santa Maria

    I would say however, that your body text needs to be set to 16px at the very least based on the width of the page.

    Does this not show on your browser?

    I do have an Ad blocker on. Good catch. But to be honest, I highly doubt you will see any significant income coming from those ads. You have minimal content and it seems there’s just a bunch of random things placed that make the flow of the page irregular.

    • Why are there two different sets of meta data (author info, date, views, tags)? I would remove them.
    • Perhaps don’t put the question in a quote block? It doesn’t belong there as you’re not quoting anyone.
    • Need more spacing between the underline and text. Maybe do away with the underline altogether for the Article title but leave them for About the author, Related posts, etc.
    • Related posts images would look better if they were the same width and height.
    • Why are you using Disqus rather than WP’s comment system?

    Overall your content needs to fit the design and right now it does not.

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

You must be logged in to reply to this topic.

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