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.

Text/body Layout

Featured Replies

Hi Crazy Bunnies, ^_^

 

I'm really struggling with how to layout text on websites. I've read up a lot on CSS and general layouts. And in general I know I still have a lot of exploring to do in terms of the page layout, which will only come with time. However at the moment when it comes to text the most comments I've read are "make sure it's easy to read" or along those lines.

 

Does anyone know of a good site they can reference to help with how to structure text efficiently, or does anyone themselves have wise words to add on the subject?

 

My preferred layout I'm working towards is something professional. And colour wise the page I'm designing has to revolve around dark green. So what I've done is made the titles white and the text itself dark green and then any key words, or important words, I make white so they stand out among the green. Oh and each paragraph is in it's own div box with a light green background and the background of the entire body area is whitish.

 

:huh: Cari.

Reading time!

 

http://webtypography.net/

http://www.wpdfd.com/issues/23/typography/

http://webstyleguide.com/type/index.html

http://ilovetypography.com/2007/09/19/15-e...web-typography/

http://ilovetypography.com

http://www.yourhtmlsource.com/text/webtypography.html

 

To summarise...

 

1) Keep things simple. Stick to as few fonts as possible, and make sure they're fonts most people are going to have. Georgia, Verdana, Arial, Helvetica, etc. etc...

 

2) CONTRAST IS GOOD. #000 on #FFF is a bit harsh, so try #333 instead, etc. etc...

 

3) Don't size your text in pixels. Users like to be able to resize the text themselves if it's too small / too big, but IE6 users cannot resize text in pixels. :(

I think of all the things I have read which really helped me get to grips with text layout or typography there are two things which explained the most and improved my designs the most:

1. WDF Thread on Typography - in particular the first posted link is great

2. WDF Thread on Vertical Rhythm

  • Author

Awesome :good:

 

Thanks, I'll have a read through all of these sites. Lots of homework for me tonight.

 

I'm quite embarrassed to admit this; I didn't realise until now that it is called typography :blush1:

 

Cari.

That's alright. You can't be expected to know words until you've learned them.

 

But now you know about typography, hopefully this will help any googling be more successful. :)

 

To find the links that I posted, I searched for "typography for the web".

Create an account or sign in to comment

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.