The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Design Critique typography on my article. What do you think?

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
  • #177270

    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 :

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


    Paging the resident typophile. @Chrisburton?


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




    @ian.izaguirre001 Try something like this


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


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


    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.


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


    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.


    Well, I believe there is a plugin for WordPress that allows social network logins. I would use that.

    I can’t tell you for sure about which is better because I haven’t read studies on it but I, myself, am building a social login system because I believe it is more convenient (as long as it doesn’t post things on your timeline — I hate that). The problem I have with Disqus is that it can be slow and I personally dislike the UI.


    I also increased the article font sizes

    Decrease the intro text to 18px and bump up the article title.

    I just switched it back to the WP comments system ( you are right, plus I noticed I receive less comments ever since I switched to Disques). ,

    What about a social login option? In my previous post to you, I suggested to use a plugin for that.

    I fixed the font weight of the intro text, does this thin weight look better to you ?

    Much better.

    I can understand removing the view count, but where else would I put the article post date, as it should be displayed on the open article?

    Yes but the view count is useless. The ‘Leave a Response’ anchor should be removed because you have it before the article even begins. What would the purpose be to leave a response before someone even reads the article? Why would they scroll all the way back up to click that target link?

    I just noticed, are you using Smashing Magazine as a design resource for your page? I’ve mentioned this before, you need to create a design that fits your content. Right now it does not. Don’t copy other layouts if your content does not fit it.


    You could remove ‘In Dentistry” under the article title as you have it at the very top of the page within Browse and below the article itself. That area still needs work along with the Recent Post images.

    Right, do you know of one that will not replace the WP comment form but rather add that additional option to it ?

    You will have to research that as I don’t use WordPress but I bet you anything there are numerous.

    Ok now that I have fixed the Meta tags problem, I noticed that if I remove the underline of the main Article Title , the posted date of the article might seem out of place “floating” ? Does it not to you ? you can post this code on fire bug and see the effect :

    You just need to work on spacing things out equally and lining things up. Like this, for example:


    You’ll have to play around with it.


    Also, you can click on the images for a fullscreen view. Just right click and open them in a new tab.

    The second image was just for fun and is based on the NY Times. This version would require an update to the logo. Besides that, your logo needs updating anyway due to the quality of the image.

    .entry-byline, .entry-meta {
        color: #333;
        font-size: 0.425em;
        font-weight: 400;
        padding-bottom: 20px;
        text-transform: uppercase;

    You need more space between the body text. I would set the margins like this:

    p {
        margin: 2em 0;
Viewing 15 posts - 1 through 15 (of 17 total)
  • The forum ‘Design’ is closed to new topics and replies.