Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Is This Text Clear Enough To Read?

Featured Replies

Site: HERE

 

I've made some changes to my site's homepage in terms of the image (banner) displaying the dinghy's and the weather text overlay (updated by a script every couple of minutes). I'm wonderring how easy/clear this text is to read on top of the banner... Any opinions or advice about some alterations? Maybe I should just move the text off the banner completely?

 

Will appreciate all your comments guys! Please don't hesitate to be as critical as you like either.

Hmm.. well I can read it decently. It certainly isn't the most pleasant to read text I've ever read. What you could do is add a light background that is slightly transparent. Check out Weather.com's header.. see how there is a white background but you can still kind of see the flower behind it?

Ah, I like weather.com's approach. Just need to figure out how to make the background opacity but leave text as opaque.

Done. Any better? Is the text size too small at all? The right stats are size 12px, I've got 14px as main body text across the site...

No, it's not. Try using line-height on the text. That would help alot. The colours on the text looks ok.

 

And the site looks a little boring maybe. Try a serif font like Georgia on the headlines. Think that would do. :)

What value would you recommend for the line-height property? Why would this help?

 

I appreciate the feedback.

You should really just play with it a bit. You should always use the line-height because it really helps your project. :)

It's only clear enough to read providing you don't increase the text size on your browser. Once I increased the text started jumping out of its container, and then it was very hard to read. Maybe measure the containing area in em to make it fluid?

I think it looks fine, but it would look better with some more padding and bigger line-height.

Added more padding & line-height. Would appreciate your comments again guys.

Hi Evis,

 

It looks fine to me. You should really take notbanksy's advice though and make the container fluid. Anybody that has their browser set to display larger fonts will see the text break outside of it's containing div.

 

Cheers.

How do I go about making the container fluid?

Specify width with percentage or em:s, not specific pixel width. Check out W3schools CSS dimension section - all the properties you need are listed right there.

I just increased the text sizes in FF/IE/Opera and this makes no difference to any content on my site other than the 'Google Gadget Calendar'...

 

How have you guys managed to make these browser-specific changes increase the font size of the text in the weather stats box? The only way I have managed to do this is by using 'zoom' in FF. IE & Opera zoom features both enlarge the entire page, not just the text.

I just increased the text sizes in FF/IE/Opera and this makes no difference to any content on my site other than the 'Google Gadget Calendar'...

 

How have you guys managed to make these browser-specific changes increase the font size of the text in the weather stats box? The only way I have managed to do this is by using 'zoom' in FF. IE & Opera zoom features both enlarge the entire page, not just the text.

 

hi Evis,

 

I've just tried to enlarge the text again (i'm using IE7 at the moment) and it all works ok. Did you change something recently to stop it breaking out of the div? Anyways, it works now. nice one.

Nope, haven't made any changes :). All has remained in pixel dimensions...

 

I appreciate the feedback from everyone. Thank you!

  • Jo 90 locked this topic
Guest
This topic is now closed to further replies.

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.