WordPress.org

Ready to get started?Download WordPress

Forums

New WordPress Blog - www.CouponscodesPromos.com (14 posts)

  1. lexipixel
    Member
    Posted 5 years ago #

    Just setup a new site using WordPress 2.6 -- customized the "classic" template with a sliced PhotoShop .PSD file, some CSS and a background image. I added only one plugin and got the whole thing looking good in a few days.

    Drop by. I've posted info for some good deal on domain names, hosting, and other products and services.

    If you own an ecommerce site, (shopping cart / online store) and have any COUPON CODES / PROMO CODES you want publicized, use the email link and let me know.

    http://www.CouponsCodesPromos.com

    It's totally free for users and merchants. (Eventually hoping to charge for "premium advertsing" when there is sufficient content and traffic).

    It's really amazing how much you can do with WordPress these days. It's more of a total content management system, (CMS), than just a "blog".

    Blog on!

  2. crazytaxi
    Member
    Posted 5 years ago #

    site looks well done overall! I have one dealbuster issue on this end though: the content text is rendering very poorly for me on IE7. Headlines and sidebar text are fine, but the post type is poor. Don't have time to look in FF; may be be a percentage-sizing issue or font choice vs BG.

  3. RoseCitySister
    Member
    Posted 5 years ago #

    You should definitely change that font to a sans-serif font like Arial, Lucida Sans, or whatever. Much easier to read online - it's pretty much the standard to use sans-serif text for content and leave the fancy fonts for graphics and headers.

    Not sure what you're using but it's not very readable, and like the above poster says, a deal-breaker!

  4. lexipixel
    Member
    Posted 5 years ago #

    Thanks for the feedback.

    I changed the CSS to

    .storycontent, .storycontent p {
      font-family: Verdana, Arial, sans-serif;
      color: #333;
      font-weight: 500;
      font-size: 95%;
      line-height: 1.2em;
    }

    I think that's more readable.

    Let me know. Thanks again.

  5. crazytaxi
    Member
    Posted 5 years ago #

    That's definitely more readable on my end. I'm not a big fan of percentage sizing for fonts, although you'll find arguments on both sides of the fence. That body font is more readable, but is still rendered kind of funny; hard to put my finger on it. Try changing that font-size to a fixed pixel height and see if you don't notice any difference.

  6. moshu
    Member
    Posted 5 years ago #

    It is not readable (or not easy) because of the "minus" letterspacing:

    p, li, .feedback {
      font: 90%/175% 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
      letter-spacing: -1px;
    }

    It brings the letters too close to each other - don't be afraid of space, it makes the text easily readable.

  7. lexipixel
    Member
    Posted 5 years ago #

    letter-spacing: -1px;
    
    -moshu

    ahhhh! Thanks moshu -- I was trying to nail down where that "squeezed" (kerning) effect was coming from. I searched the w3 CSS pages looking for a font property --- never though of search for something as generic sounding as "letter spacing".

    My background before the web was in print -- so I assumed it woud have been called something like "tracking" or "kerning" and be under Fonts.

    Ya' learn somethin' new every day!

    BTW- that CSS code was left over from the WP "Classic" theme I modified to build the site. It's gone. It appears the negative spacing was was meant to squish the #menu titles, but was affecting the .storycontent text which was wrapped in <p> tags.

    Try changing that font-size to a fixed pixel height
    and see if you don't notice any difference.
    
    -crazytaxi

    Ok, you got it. I changed to a pixel font size. Again, the percentage sizing was something I was trying to follow from the WP Classic (default) theme's stylesheet I modified. It seems they relied on EM and percents. I normally use fixed width layouts and pixel sized fonts in my (non-WP) site designs.

    The one exception I use is the EM on line height, (e.g. line-height:1.2em)... this just makes sense to specify the inter-line spacing in proportion to the font size and not have to recalculate, (e.g.- "line-height:1.5em" can remain in the CSS even if you changed "font-size:11px" to "font-size:13px"... for either, the spacing is still 1.5 times the font's height)..

    Thanks again for the tip off and feedback!

    A bit more about the site design...

    In addition to the WP 2.6.2 install, I've used the following (2) plugins to build the site:

    • FeedBurner FeedSmith v.2.3.1 - to setup feeds at Feedburner
    • More Fields v.0.6.8 - for the Coupon code box.. will be used for more in the future

    I look forward to any more feedback.

  8. crazytaxi
    Member
    Posted 5 years ago #

    Looks very good on my end now.

    My background before the web was in print -- so I assumed it woud have been called something like "tracking" or "kerning" and be under Fonts.

    I also came to the web from a print background, which brings up a side discussion. I still prefer the print rule of serif fonts for body text and sans-serif for larger type. All of these younger web wunderkinds may disagree, but as my eyes get older I see the wisdom in the old paradigm.

  9. moshu
    Member
    Posted 5 years ago #

    All of these younger web wunderkinds may disagree, but as my eyes get older I see the wisdom in the old paradigm.

    It's not about the age - it's about the eyes and the different medium.
    On screen the sans-serif is more readable. That's why you should use those for your body text, regardless of your print background.

    (and before you ask: yes, I am old and coming from print journalism...:)

  10. crazytaxi
    Member
    Posted 5 years ago #

    On screen the sans-serif is more readable.

    We'll just have to agree to disagree on this one. Like I said, I know I'm a lone holdout on the issue, and all manner of studies and wisdom run counter to my own preferences. But then again, two centuries of medical wisdom recommended bloodletting and leeches.

  11. RoseCitySister
    Member
    Posted 5 years ago #

    Um - let me put this another way. On screen the sans-serif is less ugly than what you've got now. Regardless of which font you use, it should be readable.

  12. lexipixel
    Member
    Posted 5 years ago #

    I think what changes the rule on-screen is the DPI and dot pitch of monitors.

    Printed on paper, at 200dpi, 300dpi or higher the serif font "little feet" are fairly clear and enhance the readability of the font even at sizes like 8pt.

    On a computer screen with a .25 dot pitch and 72dpi to 96dpi, for serif fonts sized under 14px or so, the feet get grainy and cause a dithering effect that bothers the eye.

    On the other hand, sans-serif fonts at some sizes have too much counter space, ("counter" is the typographic term for enclosed "holes" as in O, o, a, B, D, P, Q, p, g, etc). The excessive counter space of fonts rendered in light weights, (e.g. font-weight: 500 or less), makes readability worse for a completely different reason.

    I believe "making the eye happy" is the goal to readability... not too much contrast, not too grainy, weights and counters not too heavy or light, etc..

    11pt Courier was the standard typewriter font for probably 60 years because of it's readability... but it wasn't pixel-ized.

    Here's some CSS experiments to compare "readability".

    Opinions of "most readable" may be interesting...

    <html>
    <head>
    <title>Serif v. Sans-serif</title>
    <style type="text/css">
    
    div { border: 1px solid black; margin: 6px; padding: 6px; }
    
    .contrast0 { background: #fff; color: #000; }
    .contrast1 { background: #eee; color: #333; }
    .contrast2 { background: #ccc; color: #666; }
    .contrast3 { background: #aaa; color: #666; }
    
    #st1 { font-family: serif; font-size: 12px; }
    #st2 { font-family: sans-serif; font-size: 12px; }
    #st3 { font-family: serif; font-size: 14px; }
    #st4 { font-family: sans-serif; font-size: 14px; }
    #st5 { font-family: serif; font-size: 16px; }
    #st6 { font-family: sans-serif; font-size: 16px; }
    #st7 { font-family: serif; font-size: 18px; }
    #st8 { font-family: sans-serif; font-size: 18px; }
    
    </style>
    </head>
    <body>
    
    <div id="st1" class="contrast0">This is a test of the American Broadcasting System.</div>
    <div id="st2" class="contrast0">This is a test of the American Broadcasting System.</div>
    <div id="st3" class="contrast0">This is a test of the American Broadcasting System.</div>
    <div id="st4" class="contrast0">This is a test of the American Broadcasting System.</div>
    <div id="st5" class="contrast0">This is a test of the American Broadcasting System.</div>
    <div id="st6" class="contrast0">This is a test of the American Broadcasting System.</div>
    <div id="st7" class="contrast0">This is a test of the American Broadcasting System.</div>
    <div id="st8" class="contrast0">This is a test of the American Broadcasting System.</div>
    
    <div id="st1" class="contrast1">This is a test of the American Broadcasting System.</div>
    <div id="st2" class="contrast1">This is a test of the American Broadcasting System.</div>
    <div id="st3" class="contrast1">This is a test of the American Broadcasting System.</div>
    <div id="st4" class="contrast1">This is a test of the American Broadcasting System.</div>
    <div id="st5" class="contrast1">This is a test of the American Broadcasting System.</div>
    <div id="st6" class="contrast1">This is a test of the American Broadcasting System.</div>
    <div id="st7" class="contrast1">This is a test of the American Broadcasting System.</div>
    <div id="st8" class="contrast1">This is a test of the American Broadcasting System.</div>
    
    <div id="st1" class="contrast2">This is a test of the American Broadcasting System.</div>
    <div id="st2" class="contrast2">This is a test of the American Broadcasting System.</div>
    <div id="st3" class="contrast2">This is a test of the American Broadcasting System.</div>
    <div id="st4" class="contrast2">This is a test of the American Broadcasting System.</div>
    <div id="st5" class="contrast2">This is a test of the American Broadcasting System.</div>
    <div id="st6" class="contrast2">This is a test of the American Broadcasting System.</div>
    <div id="st7" class="contrast2">This is a test of the American Broadcasting System.</div>
    <div id="st8" class="contrast2">This is a test of the American Broadcasting System.</div>
    
    <div id="st1" class="contrast3">This is a test of the American Broadcasting System.</div>
    <div id="st2" class="contrast3">This is a test of the American Broadcasting System.</div>
    <div id="st3" class="contrast3">This is a test of the American Broadcasting System.</div>
    <div id="st4" class="contrast3">This is a test of the American Broadcasting System.</div>
    <div id="st5" class="contrast3">This is a test of the American Broadcasting System.</div>
    <div id="st6" class="contrast3">This is a test of the American Broadcasting System.</div>
    <div id="st7" class="contrast3">This is a test of the American Broadcasting System.</div>
    <div id="st8" class="contrast3">This is a test of the American Broadcasting System.</div>
    
    </body>
    </html>

    Vote early, vote often!

  13. lexipixel
    Member
    Posted 5 years ago #

    Just noticed I broke a rule of CSS and used the same ID more than once in a page.. :( still rendered in FF

  14. partoy
    Member
    Posted 5 years ago #

    You should definitely change that font to a sans-serif font like Arial, Lucida Sans, or whatever. Much easier to read online - it's pretty much the standard to use sans-serif text for content and leave the fancy fonts for graphics and headers.

    You've got a point thereļ¼Ž

Topic Closed

This topic has been closed to new replies.

About this Topic