Grow your CSS skills. Land your dream job.

Critique typography on my article. What do you think?

  • # August 5, 2014 at 6:42 pm

    @Chrisburton , I will buy that book. Regarding your points ( which make sense to me so thank you for that. I really appreciate your help and time) I want to analyze them. The first one is regarding : “Why are you using Disqus rather than WP’s comment system? ” —-> I switched it the Disqus system because I assumed that people will be more willing to comment using this system since it gives various ways to “sign in” (like through a social network) so the user can quickly comment, and it has a built in community which displays the actual users own custom avatar if they are part of the community. Was this a wrong idea of mine? Do you think someone is less likely to comment using it or that WP comment system is better?

    # August 5, 2014 at 7:58 pm

    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.

    # August 6, 2014 at 5:31 am

    @Chrisburton , 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). ,

    1.) I also increased the article font sizes (headers body text etc.) so you can recheck that http://iamdentistry.com/archive/dentistry/bad-tooth-habits-watch/ ,

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

    3.) Now regarding another point you made: “Why are there two different sets of meta data (author info, date, views, tags)? I would remove them. ” ————–> I do not understand how this is unusual for example any smashing magazine article has meta tags under the main article header and after the article (http://www.smashingmagazine.com/2014/08/04/improve-your-email-workflow-with-modular-design/) just like me for example, even though they have it more decorated). 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 ?

    # August 6, 2014 at 11:43 am

    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.

    # August 6, 2014 at 3:33 pm

    @Chrisburton ,

    I just noticed, are you using Smashing Magazine as a design resource for your page?

    No I am not, I was just looking at it before I commented and noticed it mirrored my layout.

    Yes but the view count is useless. The ‘Leave a Response’ anchor should be removed because you have it before the article even begins.

    Yes you are right, I just removed the views count and the leave aresponse anchor from my meta: http://iamdentistry.com/archive/dentistry/bad-tooth-habits-watch/ … Does this look better to you?

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

    Yes this is done. I also bumped the article title, should I bump it up more or does it flow right to you ?

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

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

    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.

    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 :

    .singular .entry-header {
        border-bottom: 0 none;
    }
    # August 6, 2014 at 9:25 pm

    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:

    OR

    You’ll have to play around with it.

    # August 7, 2014 at 12:01 am

    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.

    # August 7, 2014 at 10:23 am

    @Chrisburton ,

    your logo needs updating anyway due to the quality of the image.

    I Just upload a higher quality logo header image, thank you for pointing that out.

    You could remove ‘In Dentistry” under the article title

    Done :-)

    needs work along with the Recent Post images.

    I will work on this , it is just going to take a while since I need to re-upload and edit to a perfect size All featured post images of every single article I have.

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

    I will research this.

    Perhaps don’t put the question in a quote block? It doesn’t belong there as you’re not quoting anyone.

    Right, I get this point , but I added that border to the left of the end of article question in order to draw attention to it, and give it a placeholder of sorts so it did not look like a random centered text. I will remove the left border. Do you think I should also switch the text color to match the article text color, or is leaving it a different color good since it separates it from the article text and draws attention?

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

    Ok I just edited the meta tags format to match your first example ( I think I matched it pretty spot on ). Did I do these changes good or should I change something? This is what I added if you want to edit it in firebug :

    http://iamdentistry.com/archive/dentistry/bad-tooth-habits-watch/

    .entry-byline a, .entry-meta a {
        color: #333;
    }
    
    .entry-byline, .entry-meta {
        color: #333;
        font-size: 0.5em;
        font-weight: 600;
        padding-bottom: 10px;
        text-transform: uppercase;
    }
    
    span.author.vcard {
        padding-right: 15px;
    }
    
    .singular .entry-header {
        border-bottom: medium none;
    }
    
    article h1, #content.page h1 {
        color: rgba(51, 51, 51, 1);
        font-family: "Open Sans",sans-serif !important;
        font-size: 40px !important;
        font-style: normal !important;
        font-weight: 900 !important;
        margin-bottom: 25px !important;
        text-transform: capitalize !important;
        line-height: 1.1em;
        padding-bottom: 17px;
        border-bottom: 1px solid #eee;
    }
    
    # August 10, 2014 at 2:00 pm
    .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;
    }
    
    # August 14, 2014 at 11:05 am

    @Chrisburton ,

    Hi, thanks again for the help. I just finished applying the changes you recommended.
    1. Does my content fit its design better now to you ?
    2. and what is your opinion on the placements of images within the article? , I read some places that putting a small image next to the introductory text is custom practice since it allows the reader to see a smaller block of text before diving into a larger sentence of characters. Yet other places I see just the articles featured image above the Main article title , and some places below the main article title. Usually I noticed just one picture per article. What do you think is best and why ?

    # August 16, 2014 at 10:26 am
    1. It’s much improved from where it originally was.

    2. I have not read studies on image placement but I’m sure you could find some. However, it’s important to make sure you stick with about 70-90 characters on each line to maintain readability. If you see your articles going beyond that, shorten the width a bit.

    # August 16, 2014 at 1:45 pm

    @Chrisburton , ok Ill look into the characters per line.

    How do you think the typography of my end of article question is ?

    http://iamdentistry.com/archive/dentistry/bad-tooth-habits-watch/

    # August 18, 2014 at 9:22 am

    I don’t see it?

    # August 19, 2014 at 12:20 pm

    I removed the question from that article since it did not fit into place, but you can see the typography of the end of article question in this article http://iamdentistry.com/archive/dentistry/the-chemistry-of-bad-breath/

Viewing 14 posts - 16 through 29 (of 29 total)

You must be logged in to reply to this topic.

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