Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New Coder
    Join Date
    Jul 2005
    Posts
    51
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Exclamation Is My Text Readable or No?

    Hey, all.

    I am trying to figure out a way to allow my text to be readable while keeping the the effects I have going on with my page. I've settled on using Times New Roman - 16px with extra word and letter spacing, and I also got a text shadow thing going on.

    It is to the point where I can read the text just fine. Problem is, I've lost all objectivity at this point. I need other people to confirm or deny that my text is indeed readable and if it is not, what suggestions might you have that will make it more readable without reducing the translucency effect. Does text need to be bigger or a different color? Should I use a different font? Any suggestions along that nature would be much appreciated.

    Site: http://nadamt.zxq.net/index.php
    (Current viewable in Oprea 10.x, Firefox 3.5.x, Google Chrome 3.0)

    Thanks in advance.

    Oh, and don't know if it will help but I attached my CSS below. Most relevant bit is as followed:

    Code:
    #docWrap p {
    	word-spacing: 3px;
    	letter-spacing: 3px;
    	padding: 10px;
    	margin: 0px auto 4px auto;
    	font-family: "Eras Medium ITC", "Times New Roman";
    	font-size: 16px;
    	color: rgb(255,255,255);
    	line-height: 180%;
    	width: 610px; }
    Attached Files Attached Files

  • #2
    Regular Coder Donkey's Avatar
    Join Date
    Sep 2003
    Location
    Blackfield UK
    Posts
    312
    Thanks
    1
    Thanked 36 Times in 36 Posts
    My computer has your first font selection so I'm not seeing Times New Roman which I am sure would be much worse.

    These are my personal opinions, others may disagree.
    1. Body text over a background image rarely works especially in this case where there is a lot of text and a bright and fairly complex image.
    2. The text is too spaced out, and I find I have to concentrate to hard to read it because the words look wrong.
    3. The block of text is too big and samey so I loose interest. Like most web users I have a short attention span and so you need to write short paragraphs and put in some headers to break it up . Otherwise I loose interest and move away.
    4. The drop shadow effect is not appropriate on body copy - it makes it harder to read. Use it on headers, but not everywhere.
    " 90% of everything is crud" - Theodore Sturgeon
    Filthy Beast - a 60's Rock Band

  • #3
    Regular Coder
    Join Date
    Nov 2009
    Posts
    110
    Thanks
    7
    Thanked 9 Times in 9 Posts

    Get rid of the yellows and make the image more subtle

    Donkey gives very good advice above.

    One thing you might want to consider is to get rid of the bright yellow. If you make everything that is yellow in the background pic instead a dark gray then it wouldn't be as distracting. Maybe make the whole image darker in general and then the yellow areas also change to a very dark gray but just a little bit lighter than the other areas.

    That would give a nice effect but the key is to make it very subtle, so you could almost not even notice the background image if you weren't paying attention.

    Then if you think the page is too bland/colorless, add some color somewhere else other than in a busy image behind text.

    Dark text over light images can work.
    Light text over dark images can work.
    Opposing colors (like green over red, or yellow over purple) don't really work (some people think that this will be highly visible, but it is two bright colors and it just doesn't really work for text).
    Images that are both light and dark and have colors and blacks and grays will overpower your text.
    Monotone images will always be better for this kind of thing.
    Multiple contrasting colors behind text is always distracting no matter how visible/legible the text may be.

    When can we get away with placing text over busy, fully saturated images?
    Well we have all seen billboards and posters of a bright busy images with text over them, but usually that text is only a line or two in big lettering. a line of BIG WHITE text might work over the green on the lower part of a mountain landscape but it would not work across the top of that image where the lighter sky is over the mountains (a single line of BIG DARK lettering might work there). But 10 smaller lines of text really wouldn't work in that case no matter where you put it. For the ten smaller lines of text it would probably be better to fade out/desaturate or otherwise partially or fully obscure a part of the image where the text would go.

    Good luck.

  • #4
    New Coder
    Join Date
    Jul 2005
    Posts
    51
    Thanks
    1
    Thanked 0 Times in 0 Posts
    First and foremost, thank you all for the responses.

    I guess I should have I mentioned this before, but the reason why I need the background image to be vivid is because I coded a CSS Switcher that cycles between seven different color themes depending on the day of the week and each color needs to be distinct from the last. Check it out here: http://nadamt.zxq.net/observatory.php

  • #5
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Donkey's right. It works well and nicely on your headings/sidebar, but the body text is atrocious. Use a font, don't mess with its kerning unless you know why and drop the drop-shadow. There's a reason why sites tend not to use it (:

  • #6
    Regular Coder
    Join Date
    Nov 2009
    Posts
    110
    Thanks
    7
    Thanked 9 Times in 9 Posts
    You can still use your color switcher to cycle different colors.. Just don't put the colors behind your body text. Change the colors of borders, headings, buttons, etc. etc.. There are plenty of great opportunities to use color in your design without putting a busy, vivid image behind your body text.

    The image you are using now goes from near black to near white, with bright color as well. No matter what you do with the body text that image is going to overpower it.

  • #7
    New Coder
    Join Date
    Jul 2005
    Posts
    51
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Again, thanks for the responses.

    For this particular site, I may ultimately keep the drop shadow for the body text or I may discard it, but color me confused as to why drop shadow--as a matter of fact--cannot under any circumstance be used for body text. I can see why it would not be appropriate for a site selling books or something, but this is a class project that I will be presenting in the near future.

    Also, because this is something of a tech demo, I need to consider wow factor. I do not think that simply changing the color of the text will achieve that.

  • #8
    Regular Coder
    Join Date
    Nov 2009
    Posts
    110
    Thanks
    7
    Thanked 9 Times in 9 Posts
    It sounds like you just want us to confirm that the text is legible. But you have come to the wrong place. If that is what you want you should ask a family member or friend or something.

    I have been doing professional graphic design for nearly 20 years now. I have extensive experience in almost every graphic medium. I am somewhat new to modern web development (meaning the actual code - I have a great deal of experience in web design) and graphic design really is what your question is regarding.

    You could get more of a WOW factor by using well balanced colors, subtle gradient backgrounds to set off more vivid colors in the foreground. With a more vibrant and eye catching page-header. On the other hand, overpowering your body text completely with a big, bright, complex, detailed, background image is the wrong way to achieve wow factor. It gives you more of an anti-wow factor. That image is very much in-your-face but it seems to serve no real purpose and carry no real meaning aside from overpowering your text.

    There are millions of other ways for you to achieve your wow factor if you just use your imagination. But anything that goes behind that main body text really ought to be considerably more subdued.

    As for the text shadow, they are right about that too. It is distracting without actually being very noticeable (thus the wow factor is negligable while the distraction is significant). Go take a look at some brochures, some catalogs, some posters that contain a significant amount of small to medium sized text, some magazine, some other professionally designed websites. You won't find shadows on the main body text in any of those mediums. You will see it on headings, call-outs, titles, buttons, and other short bits of text. In fact using that kind of effect on the body text decreases its wow-factor immensely because there is so much small text with the effect that it becomes the norm. It is like a person swearing all the time - then when that person swears it has no meaning, but if your goody-two-shoes home ec teacher from junior high said a real swear word real loudly it would cary great weight and really give people pause because it is not the norm and she uses swear words sparingly.

    Really a well balanced design that is legible and incorporates subtle effect were subtle effects are called for and bright, vivid, special effects sparingly and in a well balanced manner will have more of a wow-factor. You want people to look at the page title and the navigation system and overall design and go "wow" you don't want them to go "wow" while they are trying to read your main body text (unless they are going "wow" because of what you have written).

    Good luck
    Last edited by linehand; 12-06-2009 at 10:13 PM.

  • #9
    New Coder
    Join Date
    Jul 2005
    Posts
    51
    Thanks
    1
    Thanked 0 Times in 0 Posts
    To linehand:

    Several things...

    Firstly, I still remain confused as to why drop shadow cannot be used in the general body text. As stated, I understand why it would not be appropriate in many circumstances but I do not understand why it can never ever ever be used. Also--and unlike you I am no expert--but I'd wager that there is a economical reason why drop shadows are selectively employed in print media.

    Secondly, that there are millions of avenues to peruse is true, but in a somewhat patronizing way. It orders of magnitude more reasonable for me to tweak the design I have already spent some weeks on than it is to start from scratch, especially given that this assignment is due soon.

    Thirdly, please understand where the "wow factor" is coming from. It is not coming from the layout of the page itself, but from the fact that the color of the layout can be manipulated. Ergo, the effect is diminished if it is only the text being changed.

    Finally, you are right. I did want to confirm whether or not my text is readable. I am puzzled as to why this would not be the appropriate forum to pose that question, but I do value your opinion nonetheless.

  • #10
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello nadamt,
    Just my own opinion here - I think the text is spaced too far apart.
    I like the Wow affect you've created with your toSwitcher though. That alone was enough to keep me on the site for a bit.

    Not my first choice for reading the classics but it may be an interesting website if you ever decide to do anything else with it.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #11
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Of course it can, it's just not very right here because you've already used the semi-transparent background.

    Seriously, get rid of the spacing. This is the major turn-off of your current style. There is also little need to use italics for body text without a specific reason; usually, it is used to draw a distinction against roman text.

  • #12
    Regular Coder Donkey's Avatar
    Join Date
    Sep 2003
    Location
    Blackfield UK
    Posts
    312
    Thanks
    1
    Thanked 36 Times in 36 Posts
    Quote Originally Posted by nadamt View Post
    I'd wager that there is a economical reason why drop shadows are selectively employed in print media.
    I think you would lose that one, it is not a question of economics but of legibility. Imagine trying to read a novel where every bit of text has a drop shadow.
    There are conventions in print media and the web that have been established over the years because they work. Don't try and reinvent the wheel. Just because you can do something that obviously impresses you doesn't mean you should use it all the time. It is self defeating - if text is difficult to read few will bother to read it.
    " 90% of everything is crud" - Theodore Sturgeon
    Filthy Beast - a 60's Rock Band

  • #13
    Regular Coder
    Join Date
    Nov 2009
    Posts
    110
    Thanks
    7
    Thanked 9 Times in 9 Posts
    I had said "It sounds like you just want us to confirm that the text is legible."
    Which is different from confirming whether it is legible or not..

    I stand by my original recommendation to lose the color from (and tone down the contrasts of) the background image.. Maybe use a smaller version of the image with color and stronger contrasts as a kind of logo-style decoration in the header area, and use color elsewhere in the design. It is just basic good design sense.

  • #14
    New Coder
    Join Date
    Jul 2005
    Posts
    51
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Apostropartheid View Post
    Of course it can, it's just not very right here because you've already used the semi-transparent background.

    Seriously, get rid of the spacing. This is the major turn-off of your current style. There is also little need to use italics for body text without a specific reason; usually, it is used to draw a distinction against roman text.
    Alright. I reduced the spacing between words. Never once used italics though.

    Quote Originally Posted by Donkey
    I think you would lose that one, it is not a question of economics but of legibility. Imagine trying to read a novel where every bit of text has a drop shadow.
    Well, there is a difference between a novel and a brochure, which was one of the examples that he cited.

    Quote Originally Posted by lineback
    I had said "It sounds like you just want us to confirm that the text is legible."
    Which is different from confirming whether it is legible or not..
    OK. Listen, just because I might take issue with one aspect of your design philosophy does not mean that I am set in my ways.

    I've actually made several tweaks to my design based on this feedback. As previously stated, I do value your opinion.

  • #15
    New Coder
    Join Date
    Jul 2005
    Posts
    51
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Hello nadamt,
    Just my own opinion here - I think the text is spaced too far apart.
    I like the Wow affect you've created with your toSwitcher though. That alone was enough to keep me on the site for a bit.

    Not my first choice for reading the classics but it may be an interesting website if you ever decide to do anything else with it.
    Thank you for your response.

    I do not think that I can do much with this particular design. Perhaps now that I have gotten back into coding after all these months, I will continue to use it as a sandbox.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •