I have a lot of text for the website and all of them are important. I cant cut down the text much.
Then, is there any better way to represents those text?
The contents include some bullet points and two or more independent headings.
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.Sign up to join this community
There is several tricks.
Split information to paragraphs with different level headers. Like you can see at wikipedia http://en.wikipedia.org/wiki/Article_(grammar)
Hide information and show the wide button [show more]. Don't forget about formatting.
Depends on the purpose of your site. You have some techniques to improve your page with a lot of text. You could use some approaches like @Pierre's and Aleksandr Blekh answer. But if you can't hide your text for any reason, you have other options:
Choose a clean and simple font:
To makes the text more attractive and easy to read.
Combine big titles with colors and font-weight: bold;
Focus the user attention on the most important things in the text: .
Wrong way (example):
source examples: http://focuslabllc.com/
It actually all depends on the purpose of your site and of course of its users.
If you take the example of a newspaper website, no one will argue that displaying a lot of text is bad practice. Such sites, however, have taken design steps to continually improve the experience for their users. One interesting idea is to take advantage of the "reader" feature of modern browsers :
If applicable, you can also first display the beginning only or split and paginate your content to give your users the opportunity to :
Adding to some approaches mentioned in @Pierre's answer. You could use some visual elements that hide portions of the information (text, in your case) and display the hidden portions instantly on demand (usually, following user's action, such mouse click). Such visual elements include, but are not limited to, tabs, expanding text panels and widgets (I'm sure that the terminology differs across UI/UX libraries and frameworks). The same on-demand display behavior can also be implemented via simpler elements, such as combination of text panels and check boxes or drop-down lists, albeit with lower development productivity.
Without meaning to be facetious, printed books have spent centuries refining solutions to this problem, on several different levels. If you want to make it easy for someone to consume a large body of text through a rectangular viewport, look at the page of a comparable printed book and imagine it's a browser window.
Websites tend to strongly emulate printed periodical design, because commercial content websites are very similar to magazines in their intentions and business strategy, i.e. keeping readers (over)stimulated and constantly diverting their attention to ads. This tradition will work against you if you're trying to help readers pay attention to a long text.
The most obvious difference between a book page and a web page is that the book has nothing apart from the text, plus a page number to mark your position. The second most obvious thing is that books (especially those with higher production values) use a huge amount of whitespace, which for some reason we're needlessly afraid of doing onscreen. If you can fit more than 10 words per line, then you can afford to use more white space!
I would actually take an opposite line to some of the other answers. You want the reader to get comfortable and read the whole text from end to end, so own that; don't paginate or supply widgets to help the reader skip around the page, and let the scrollbars show that this is going to take a while. People can happily read 300 pages of Stephen King in one sitting, with no hyperlinked ToC or elaborately-diagrammed structure or other assistance, so let them approach it that way.
(Of course, this makes it even more important that the text itself is readable and well-structured).