...

View Full Version : Is My Text Readable or No?



nadamt
12-06-2009, 01:15 AM
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:


#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; }

Donkey
12-06-2009, 02:49 AM
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.

linehand
12-06-2009, 03:05 PM
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.

nadamt
12-06-2009, 06:14 PM
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

Apostropartheid
12-06-2009, 07:01 PM
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 (:

linehand
12-06-2009, 07:22 PM
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.

nadamt
12-06-2009, 08:19 PM
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.

linehand
12-06-2009, 09:04 PM
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 :)

nadamt
12-06-2009, 09:51 PM
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.

Excavator
12-06-2009, 10:12 PM
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.

Apostropartheid
12-07-2009, 12:21 AM
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.

Donkey
12-07-2009, 01:12 AM
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.

linehand
12-07-2009, 02:38 AM
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.

nadamt
12-07-2009, 08:20 PM
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.


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.


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.

nadamt
12-07-2009, 08:26 PM
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.

Apostropartheid
12-07-2009, 09:05 PM
Look, I mocked up what it'd look like with nice, readable text:
http://asqu3q.bay.livefilestore.com/y1pl2Wj4sYQW-cdDsvu144NoQJnGWM92ISTkfeMZlJUYDL__84Crb2jri9ltGsD1pcwZzhp6JFL4b1LAq1fxoBtoBSqZuSM7OUA/week-11-project.png



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum