# data[].attributes.attachment_link.description
The 4 Principles of Design by Josh Gallagan adapted from Robin Williams Non-Designers Design Book Contrast Contrast is what pulls you in, it draws your eyes to the page. It allows you to move around the page and find things Contrast must be strong. "If two elements, such as type, rules, graphics, color, texture, etc.

# data[].attributes.attachment_link.description
Sharpened Productions' top ten web design rules.

# data[].attributes.attachment_link.readable_text
Have you ever been on a site where you feel reluctant to close the tab instantly? I bet you have at least once in your life.

So what is it about the website that urges you to click the cross mark. Is it the ambience or the feel that doesn't connect with you?

When you talk about web design, it's always about the web standards. You will rarely find people talking about bad design. Because they want to replicate the best design standards, not the ones that suck.

A poor design comes with a great experience and a lesson for the future. knowing the downside of a design helps you in proper decision making.

So, to speed up your decision-making process, we have collected 5 worst web design examples that will make you feel that your website is a gem.

However, before diving into it here is a quick summary of what makes a poor design.

The design choice is incoherent. It looks like hundreds of people were involved in the design building with different opinions of their own.

The key information isn't transparent.

The colour combination doesn't match with the theme and niche.

Typography and graphics are horrible.

A website isn't responsive in nature.

No or poor use of call to action buttons.

Takes ages to load.

Now coming straight to the topic, here are the 5 examples of bad web design that will make you feel that your website is a gem.

Arngren

Arngren is a classified site built on the Norwegian language. This site takes the worst design to an extreme level by defying every single principle of web design. It reminds me of the yellow pages of 90's where advertisers used to fight to fit into a small box of the page. This is the website that replicates the same design.

We are in 2017. These days' people try to follow the design from most successful sites like eBay and Amazon. But Arngren doesn't care about the rules. It literally places the graphics, content, and links wherever it wants to make the site a comprehensible mess.

Reasons for the nomination on bad design category:

Poor navigational structure.

Typography is small and confusing for the readers

Lacks clear message of the business.

Random use of colours.

Source: http://arngren.net/

Bavarian Brathouse

Have you ever looked at a drawing made by your son when he was in a kinder garden? If you want to see it live on the web, Bavarian Brathouse is the go to a website. It looks like the artist was on drugs when he made this website.

It feels like an 80's street walls where pamphlets were attached for information. The website is just there for the sake of a name. A background image of a wall with no parallax effect and dull graphics makes it one of the worse websites.

Reasons for the nomination on bad design category:

Lacks aesthetic design with no defined navigation.

Overflush left body copy with no clear message.

Poor use of graphic that doesn't resonate with business value.

It doesn't have any call to actions.

Source: http://bavarianbrathaus.info/

Pacific Northwest X-Ray Inc.

Pacific Northwest X-Ray Inc or as the site says PNWX is a site that basically covers everything related with X-Ray. It's amazing how such an important site is handled so poorly. Although, it's able to portray its information straight away, the clear picture is far away from this website.

You can clearly see the conflicts among the text and colour where they don't blend with the background. It definitely looks like a site made in early 2000's where the design wasn't considered the "big thing." The footer section mentioned the website as a catalogue is a clear sign that this website isn't maintained for commercial purposes.

Reasons for the nomination on bad design category:

Bad typography with poor readability feature.

Fonts and colour don't connect with the website.

Lacks proper call to action. There is only a phone number that too at the bottom.

Flash is dead.

Source: http://www.pnwx.com/

Rudgwick Steam & County Show

I don't know if I should say this website an ugly website or another example of a poorly crafted design. When I landed on this website, I didn't know where I should start from. I was literally confused with the lack of proper navigation and readability nature. The welcome message is below the fold and has no clear cut meaning on the expectations. It looks nothing more than a list post rather than a website.

Reasons for the nomination on bad design category:

Links on navigation doesn't work.

Random use of colours that give negative vibes.

Lacks clear picture of the website.

Large meaningless graphics

Source: http://www.rudgwicksteamshow.co.uk

Penny Juice

This website basically targets the kids under a certain age to drink penny juice. Although, it has a basic tagline that says "Who is Penny Juice", it still lacks the major theme. The extreme use of colour makes the website look nothing more than a kid trying to learn his first paint.

A proper website should use white space properly. However, this site doesn't have any white space. It just has every section divided into colours like a rainbow. And the text is just there without any substance. I would define this website as the one dedicated to kid designed by a kid.

Reasons for the nomination on bad design category:

Poor user experience.

Random use of colour with text that's hardly readable.

No white space used. It's clearly not pleasing to the eye.

No navigation what so ever. I have to reach to the bottom to find some information.

Source: http://pennyjuice.com/
Wrapping up
There aren't many websites in the market that are perfect. The business owners who invest on cheap designers tend to have these kinds of issues. Nevertheless, you can improve your site's presence by taking something out of these websites. Hopefully, you won't make the same mistakes that these websites have done.

# data[].attributes.attachment_link.description
Have you ever been on a site where you feel reluctant to close the tab instantly? I bet you have at least once in your life. So what is it about the website that urges you to click the cross mark. Is it the ambience or the feel that doesn't connect with you?

# data[].attributes.body
Choose Accessible Fonts

# data[].attributes.attachment_link.readable_text
This Page

List of Recommended Fonts

Below is a list of recommended fonts and fonts which should be used sparingly.

Factors for Selecting Fonts

Below are some factors that can be considered when selecting a legible font.

Type of Fonts

Fonts can be classified as follows

Serif: Strokes extend out from the top and/or bottom of the letterforms. Examples include Georgia, Times New Roman, and Palatino.

Sans serif font: Strokes do not extend out from the top or bottom of the letterform. Examples include Arial, Helvetica, Verdana, and Lucida Grande (Mac)/Lucida Sans Unicode (PC).

Monospace: Each letter has the same width. Monospace fonts can be serif (Courier New) or sans-serif (Andale Mono or Monaco [Mac]).

Sans-serif fonts such as Verdana and Arial were originally recommended over serif fonts like Times New Roman, because monitors were not able to render fonts with serifs very accurately. A lot of detail useful in print was lost in the transition to computer monitors.

However, advances in display technology can allow for more serif fonts to be used on the Web (if the audience is using recent operating systems and browsers).

Font Availability

The ideal font is one that is available to many members of the audience. Microsoft fonts are generally good choices, but some may be more recent than others, and therefore less common. Also, if your audience contains a lot of Unix users, be aware that their font selection can be different from that of Windows and Mac.

If you specify a font in a CSS, you should include alternate backup fonts whenever possible.

x-height

The x-height of a font is the height of any lowercase letter without ascenders or descenders. Letters used to measure x-height include lowercase x, o, a, r, m, and s. Letters with ascenders include lowercase b, d, h, and k, and those with descenders include p, q, g, and j.

Generally speaking the higher the x-height in relation to a capital letter, the more legible the font is likely to be.

Distinguishing Ambiguous Characters

Another factor in legibility is how well-distinguished similar characters are. Potentially problematic characters include capital I, number 1 and lowercase l (L), as well as 0 (zero) and capital O. Ideally, each letter or number form will be distinct.

Weight

Weight is a measure of a letterform's thickness in comparison to its height. Some fonts, such as Verdana, are designed with more weight than others, such as Palatino. Weight can assist with legibility because it darkens letters, but too much weight, such as in Arial Black, can make a font unsuitable for body text.

Character Width

Generally speaking, wider fonts are more legible than narrower fonts (within reason). One way to check width is to examine the letters x and o. You may also want to check narrow letters such as lowercase i and j to see how legible they are. A related concept is tracking, or the width between adjacent letters.

Font Samples

Below is a list of fonts with notes on the legibility of each. Fonts are available on both PC and Mac unless otherwise specified.

Bookman Old Style

Available from Microsoft. Traditional serif font designed for legibility. Good x-height, but may not be on all computers.

Xx Oo Aa Rr

I vs. 1 vs. l

0 vs. O

i,j

Palatino (Mac)/
Palatino Linotype (PC)/
Book Antiqua (PC)

Serif. Traditional print font. Weight can be light.

Xx Oo Aa Rr

I vs. 1 vs. l

0 vs. O

i,j

Andika

Another font designed for beginning readers with non-English support. Get Andika font.

Xx Oo Aa Rr

I vs. i vs. l

0 vs. O

i,j

# data[].attributes.attachment_link.description
Below is a list of recommended fonts and fonts which should be used sparingly. Below are some factors that can be considered when selecting a legible font. Fonts can be classified as follows Serif: Strokes extend out from the top and/or bottom of the letterforms. Examples include Georgia, Times New Roman, and Palatino.

# data[].attributes.body
Nice Accessibility Tool

# data[].attributes.attachment_link.description
Create and share color palettes for your UI, and measure the accessibility of any color combination.

# data[].attributes.attachment_link.description
You can learn more about this project on GitHub.

# data[].attributes.attachment_link.readable_text
The Importance of Designing for Readability

Text is not an afterthought in the design process. It should be your first consideration.

Readability should be one of the top concerns when it comes to any design project. If text can't be read, then why are you designing in the first place? Good design delivers content in a way that is understandable; readability is a big part of comprehension. Today we'll be discussing how you can plan a design around the words, so that your projects are easy to read.

What is Readability?

We talk about readability a lot when it comes to design. But readability, and readable or legible text, are not quite the same thing. If someone can make out letters, text is considered readable. That does not mean, though, that words are necessarily easy to read or comprehend; they are just decipherable.

Readability is the ease with which text can be read. Comprehension is a key factor in terms of readability, as is being able to quickly look at - and understand - lettering. Readable text can be scanned quickly, from a distance.

Readability also factors in the words themselves and how easy they are to comprehend and understand. (Some experts recommenced that text written for general consumption should not exceed an eighth-grade reading level to maximize readability.)

Let's take a look at a few more of the visual standards that contribute to readability.

Line Length

"How long a line of type spans can be a key factor when it comes to readability and it is almost unseen."

Lines of type, especially in large blocks, that are too long can cause the eyes to tire and make reading difficult. Line that are too short often result in awkward breaks. If hyphenation is used, short lines will also result in many hyphenated words, which can also break up the flow of reading.

Where you want text to fall is somewhere in that happy medium. Text should be large enough to read with ease, but not so large that it causes odd pauses or breaks in reading.

There are a variety of standards that contribute to the perfect line length (and even a few mathematical formulas). One of the best takes into account the width of a text frame (this works best for printed projects but applies to anything using picas as a measurement tool), and divides it in half to determine the optimal font size. You can typically adjust the point size up or down a couple of points in either direction from that starting point.

So if a column is 36 picas wide (in print), the text would be about 18 points.

What About Digital Projects That Measure in Pixels?

You can apply the same formula, but it gets a little more complicated: There are 16 pixels per pica. So if your frame is 600 pixels wide, the text would be 18-19 points. (600/16 = 37.5/2 = 18.75). Personally, I think this leaves type a little on the large side. That brings us to option #2 for digital projects. Set type in terms of characters (and spaces) per line.

When it comes to body text, the optimal number of characters per line is 50 to 60, according to one of the timeless typography textbooks, "Typographie: A Manual of Design" by Emil Ruder. That range can be extended somewhat depending on the style of type used and device it is being viewed on. For most projects the safe range for desktop devices is 45 to 75 characters per line. The optimal range for mobile devices is 35 to 50 characters per line.

Space and Contrast

Space and proper contrast are key components when it comes to readability. Lettering must live in its own space - not share with other lettering or images - and the color of text and the background must be different enough to be distinguishable.

As with line length, space between lines is important. It is recommended that the space between lines of type (called leading) is at least equal to the point size of type and most digital designers opt for a minimum of 150 percent of text size. This leaves plenty of space for each line in large blocks of text to be read. As with line length, too much or too little space between lines, can make comprehension difficult.

Designers should also pay particular attention to the space between blocks of text and other objects. Be aware of text wraps and text that crosses into the boundaries of other objects. Text wraps - both vertical and horizontal - should be at least equal to the line spacing used for a block of text. Avoid allowing text blocks to touch other objects or elements, or run across or on top of images.

"Reserve colored type for big or oversized words or logos."

Don't forget about the margins. Remember to leave some white space around the entire text frame, creating an almost invisible halo. This margin will help set text apart from other "noise," easing the reader into the copy.

Think about contrast as well. Space is one way to create contrast; another is color. Black text on a pale background is a popular choice for blogs and books because large copy blocks need to stand apart from the medium (paper or screen). When it comes to blocks of text for reading, stick to simple color choices such as black, white or gray that stand out from the background. Reserve colored type for big or oversized words or logos.

Hyphenation and Word Breaks

One of the most irritating things to come across as a reader is a giant hyphen in the middle of a headline or a subhead that spans three or four lines deep. Pay particular attention to these details when setting type because they can be both aggravating to readers and difficult to comprehend.

Hyphens cause readers to stop and pause in the middle of a word. They should be eliminated from large type and furniture - anything bigger than 25 points - and used with care in small type.

A few hyphens are acceptable in large copy blocks, but consider setting a limited number of hyphens per paragraph.

Poor writing and word breaks can be just as jarring for readers. Try to keep headlines and subheads short, simple and direct. Avoid long phrases and keep wording terse. Give readers a taste of the text to come, enticing them to read more.

When working with digital and web projects, consider plenty of breaks and subheads for large amounts of copy (you will see we do that here with Design Shack articles). These breaks make text easier to digest visually and makes longer copy seem less intimidating to read.

Alignment

Whether text is in the center, to the left, or to the right side of a document or screen, is also important and can greatly impact readability. Generally speaking, the strong alignment for text is left-aligned. Left alignment works because it mirrors the way you read - from left to right. You know where each line ends and where the next begins.

Right and justified alignments can be the most difficult to use. Right alignment is best reserved for small blocks of text, such as big quotes or artistic text elements. Justified text requires pinpoint-perfect hyphenation and justification specifications and is best used in a non-fluid environment, which is why you see it most commonly in the confines of print design.

Centered text, while popular, does not lend itself to readability. It can work for small text blocks but should not be used for more than a few lines. (Check out this previous Design Shack post on How to Use Centered Alignments for ideas and examples.) The difficulty with centered text is that it can be hard for the eye to know where things start and stop since lines are ragged on both sides of the copy block.

Readability Tools

The Readability Test Tool: Enter a URL (or block of text directly) and get a mathematically calculated readability score. You get quick and easy-to-understand results, such as reading grade level and scores on a number of readability indices, plus an overall analysis. The tool also includes a nifty bookmarklet.

Readability: This web browser plugin and app turns any web page into a clean view for reading and allows you to collect pages to read later.

Juicy Studio Readability Test: Learn more about all of the different readability tests and algorithms and how to understand what each means and how it can relate to your projects.

Information Architects "The 100% Easy-2-Read Standard:" This article written in 2006 includes a readability checklist of sorts. While it primarily applies to web design, many of the tips are thought-provoking and are still applicable today.

Conclusion

Design for readability or don't bother using text at all. If you want your content to be effective, it must be readable. By designing with readability in mind, you are doing your readers and users a service.

With so much information out there, users tend to look (or click) away from text that is not easy to understand in a flash. Those are readers, or potential customers, that you may never get back.

# data[].attributes.attachment_link.title
The Importance of Designing for Readability

# data[].attributes.attachment_link.description
Text is not an afterthought in the design process. It should be your first consideration. Readability should be one of the top concerns when it comes to any design project. If text can't be read, then why are you designing in the first place? Good design delivers content in a way that is understandable; readability [...]

# data[].attributes.attachment_link.readable_text
Readability is one of the more important aspects of Web design usability. Readable text affects how users process the information in the content. Poor readability scares readers away from the content. On the other hand, done correctly, readability allows users to efficiently read and take in the information in the text. You want users to be able to read your content and absorb it easily.

In this post, we'll explain some Web typography terms and how they play into readability; we'll present numerous tips to help improve the readability of your content; and we'll showcase very readable websites, layouts and articles.

There are many factors that play into the readability of text. There are also a number of terms, all very important. Here are a few of the more common Web typography terms and an explanation of how each term affects readability.

"You must unlearn what you have learned!" Meet the brand new episode of SmashingConf San Francisco with smart front-end tricks and UX techniques. Featuring Yiying Lu, Aarron Draplin, Smashing Yoda, and many others. Tickets now on sale. April 17-18.

Check the speakers →

Hierarchy Every typographic layout needs the essential element of hierarchy. Hierarchy defines how to read through content. It shows the user were to start reading and where to read through. It differentiates headers from body text. Although colors of text boxes can be used to contrast headers and body text, hierarchy refers to the difference in size between these elements. Hierarchy plays a huge part in how scannable a layout is. It is an important technique that needs to be mastered to achieve readable Web typography.

UXBooth uses a very clean hierarchy to achieve readable Web typography.

Contrast Contrast is the core factor in whether or not text is easy to read. Good contrasts will make text easy on the eyes, easy to scan quickly, and overall more readable. On the other hand, poor contrast will force the user to squint and make reading the body text almost painful, not to mention a lot slower.

As shown in the following illustration, black on white is very readable. Black on white is obviously the standard contrast colors, and to achieve readable content it is good to stay in the range of black-on-white contrast.

This one, however, pink on blue, is nearly impossible to read. This example my be a little extreme, but it shows how such an awful contrast can have a major impact on the text. You probably won't see websites using such poor contrast, but it still shows why you need to be very smart about it.

Line Height Line height is a very common term meaning the space between individual lines of text. Line height is another factor in the readability of body text and even headers. Sufficient line height is especially important in Web design because it makes the text ultimately more scannable. Line height that is too short will cause users to squint while reading. If it is too large, the text will seem like separate bodies instead of grouped together as one.

Letter Spacing Like line height, letter spacing affects readability in Web typography. Letter spacing is, as the name suggests, the space between each letter in words. In print layout, negative letter spacing is a common technique to add a more fun feel to the layout, but it should never be used in body text. In any text, letter spacing is an obvious factor in legibility.

Line Length Line length is often overlooked in Web typography but should not be. Line length is, of course, the number of words per line. A good line length is one that allows the reader's eyes to flow from the end of one line to the beginning of the next very easily and naturally.

The Keys to Readable Typography

Achieving readability is relatively easy; all it takes is to follow a few key practices. A readable Web page can go a long way with your users, and readability has a huge impact on their experience. Designing for the Web is all about making the user's experience as pleasant as possible. Here are 9 tips that will help you work towards readability.

1. User-Friendly Headers Headers are a key element in typography, Web and print alike. As mentioned, they are part of the text hierarchy and a major factor in scannable content.

First off, header size is just as important as the size of the body text. Going too big with the header with a large amount of content can throw the user off balance when reading and cause them to lose their spot. It will ultimately ruin the flow of the content and be a distraction. Headers that are too small will ruin the hierarchy of the article, too. If the header is too small, it will not draw the user's attention as it should.

Next, it is important to provide ample space between the header and body text.

2. Scannable Text I have already mentioned "scannable" text many times, and you have surely heard it elsewhere. Scannable text goes hand in hand with readable text. Making copy scannable consists of good use of headers, hierarchy and focus points to guide the user through the content.

So, what makes copy scannable? Well, there are many factors, most of which have already been mentioned. Header size and position, body text size, text line height, text contrast and the way focus points are differentiated all impact how scannable copy is.

Focus points are certain elements or objects within the layout that attract, or are supposed to attract, the user's attention. This could be a header, a graphical element, a button, etc.

3. White Space In content-heavy layouts, spacing contributes to the readability of content. White space helps to offset large amounts of text and helps the user's eyes flow through the text. It also provides separation between elements in the layout, including graphics and text.

In the example below, white space and only white space is used to separate text elements. The layout is very clean and efficient. The user's eyes flow from text element to text element with ease, because of the large amounts of white space.

4. Consistency Consistency is often regarded as an important technique for usability, but it also applies to readability. Consistency in the hierarchy is important to a user-friendly layout. This means that all headers of the same importance in the hierarchy should be the same size, color and font. For example, all <h1> headers in an article should look identical. Why? This consistency provides users with a familiar focus point when they are scanning, and it helps to organize the content.

5. Density of Text Density of text refers to the amount of words you place in one area. Density of content has a major impact on your content's readability. Density is affected by spacing options such as line height, letter spacing and text size. If you find a balance between all of these so that the content is neither too compact nor too widely spaced, you will have perfect density that is both readable and scannable.

6. Emphasis of Important Elements Another key factor is emphasis of certain elements within the body content. This includes highlighting links, bolding important text and showing quotes. As mentioned, focus points are essential in Web typography. By emphasizing these objects, you provide focus points for the user. These points and objects help break up monotonous text.

Scannable text is extremely important. By providing these focus points,, you make the body text extremely scannable. Bolding key lines of text immediately attracts the user's eye and is therefore a very important element in presenting important information.

Pictured below is an article from UXBooth. This article uses bolding and italics to point out important information in the article. This is a very readable article and very easy article to scan for information.

7. Organization of Information Believe it or not, the way you organize information in an article can strengthen readability. Users are guided with ease through content that is properly organized because information is easier to find. This veers into issues beyond the scope of this article but is still very important.

8. Clean Graphical Implementation Every text body needs some sort of visual support, be it an image, icon, graph or illustration. Placing the graphic in the article can be challenging. Sufficient space is needed between the graphic and text.

If the graphical element is an image, then a clean border is a good idea for providing a clean separation from the text. Borders can help guide the user's eyes and are good for adding style to content. It is important, however, to keep borders in content simple. They should have a subtle color palette and shouldn't be too large.

In the case of graphical elements such as icons and illustrations, space is the only separator that should be used. The content should move cleanly around the graphic without disrupting the text.

9. Use of Separators Separators are a simple and easy way to divide text into sections in a clean and organized manner. They can be used to divide hierarchy elements, such as headers and body text. They can also be used to divide content into sections.

The simplest form of divider is a single line. These are most often used to divide hierarchy elements and are very useful for making subtle divisions that still play a big role in readability.

Another common way to divide content is to use boxes. Text boxes are excellent for separating unrelated content on a single page. They help move the user's eyes through a complex layout. Below is an example of this on Pixelmator's website. It uses boxes to separate content in a clean way. Notice how the boxes are defined by their background instead of a border.

10. Good Margins You hear people say that you should use white space, but why? White space actually helps draw the user's eye to the text. The blank area (white space) forces the eye to focus on the text. So white space will influence the flow and readability of content. Margins are one of the best white space elements and support text elements well. Margins on either side will force the user's eye to focus inward on the core content of the article.

Margins also support the article in another way. They help separate content from the rest of the design and layout. Text shouldn't bleed into other layout elements, especially if it is a long article. Margins help define the article and its separation.

In the grid-based layout below, margins and only margins are used to set apart bodies of text. The result is a clean, clear and concise page.

Is your pattern library up to date today? Alla Kholmatova has just finished a fully fledged book on Design Systems and how to get them right. With common traps, gotchas and the lessons she learned. Hardcover, eBook. Just sayin'.

Table of Contents →

Effects To Give Typography Some Flair

For the most part, text is text, simply words on a plain single-colored background. Not too complex, but it works. Occasionally, though, the text layout will need some styling and decoration. This may be a header or typography used in the overall design of the website (as opposed to the article content). No matter what the form, it is important to always stay within the limits of readability. Yes, it is essential to be creative and use decorative styling, but the typography must be legible or else it becomes almost useless.

Fancy Text One good way to style typography is to use a fancy or unique font within the layout along with standard fonts. It is important to use simple and standard fonts for body text, but using fancy fonts elsewhere is an easy way to mix it up and add a little more to the theme. Using a single font throughout the entire website gets boring and, although readable, shouldn't be done.

Letterpress Another very common form of Web typography styling is letterpress. The example below uses a letterpress technique to add depth and embellish the layout. It looks very nice and flows cleanly, and the text is still completely readable.

Style the Background Adding a nice background can be just as effective as styling text. By decorating the text body background, you are styling the text. Styling the background can be visually beautiful but can also reduce legibility. This is potentially a big problem but easily avoidable.

Keep the Contrast First and foremost, it important to keep contrast within a readable range. For the background, use colors that are much subtler and duller than those of the text. This will allow the user's eye to focus on the text and not be distracted by the background.

Textures Work Nicely The best road to take with the background is to use a nice texture, which won't detract from the typography.

Here is a dark website with a good typographic style. The typography has a decorative background, but the contrast still works nicely. The text itself has no styling, but the background makes up for it.

This is another great texture that supports the typography. The background texture resembles a canvas, and the typography takes on the form of a watercolor.

Link Styling Within long text, links are one more type of focus point, and you should find a way to make them pop. In sum, the best way to do this is to use underlining, a different color than the body text, italics and a different font. You can combine these to great effect or just use one. The example below underlines and uses a different color for links.

Showcase of Help Elements

Help elements are integrated in many websites, and you often don't notice them. Here are a few examples of usable help elements.

Blog Articles Readability is important in blog articles especially. Here are a few excellent examples.

PSD.TUTSPLUS and every Envato blog have very readable content. This particular example showcases a good use of headers in a well-structured hierarchy.

AppStorm: This website uses very good colors and header sizes to show hierarchy, and the articles flow very smoothly. Also note the significant amount of spacing above each sub-header.

Macalicious This article makes good use of alternating colors in its headers. The body text is also very readable and has a legible contrast.

Tutorial9 Pay attention to how this article on Tutorial9 provides a good amount of spacing and a nice border around images. The text flows, and the image doesn't detract from the text.

Fuel Your Creativity Articles on Fuel Your Creativity have very smart spacing between the headers and sub-headers. The white space supports the text.

Good Graphics Use The following examples show how to make graphic elements support the readability of the content.

Apple Apple's core content plays very nicely with the visual layout. All images blend into the background of the website. This allows for a visually pleasing layout that flows smoothly and looks awesome.

Pixelmator The layout of this page is perfectly spaced. The text moves around the image.

Checkout App This beautiful and minimalist website uses detailed icons to support the titles and information. The icons improve the scannability of the content.

Highrise A readable and scannable layout that packs a large amount of information into a clean layout. They also use large icons as focus points.

Mint This is an all-around beautiful website. It uses a significant amount of white space, dashed divider lines and large visuals.

Kupferwerk Nice images between paragraphs and good borders around images.

Web Designer Wall A well-spaced image layout, with a slight but noticeable border and ample padding, which looks great.
Well-Styled Typography
The following examples show creative uses of typography.

IAAH Fancy header text and a good background highlight the body here.

OakesDesign Good contrast of typography and color makes for a striking website.

The Cosmic Machine An example of letterpress that fits the style of the website.

Web Designer Wall Job Board This text is well styled. The sketched style works nicely with the rest of the website and is still completely readable, because the sketching texture is used only for text and does not disrupt it.

Bern This is a good example of typography used cleanly in a grunge layout. You may notice that the letterpress style is also used here.

Digimurai Here is an example of styled typography with a good hierarchical structure beyond the article.

Product Planner This header has a clean gradient that contrasts well with the dark background.

Paramore Redd More simple but beautiful text effects.

Tao Effect A beautiful and scannable layout, with icons and different text styles to break up the article.

Take the Walk Readable but strongly textured text.

Flash Gaming Summit Good coloring and a perfect hierarchy.

Brynn Sheperd A header hierarchy similar to what you would find in a print layout, but it flows seamlessly here.

Northtemple Using images for text is another excellent technique.

Miles Dowsett Extremely beautiful typography, with a nice background, a good color pallet and plenty of focus points.

Design Loom Good frilly typography that flows with the illustration.

Powerset Another example of letterpress style.

Matt Dempsey Amazing typography with a painted background.

Carbonica A sketched style that works with the rest of the website.

Gary Nock One last example of hand-drawn text, this time on a paper background.

# data[].attributes.attachment_link.title
10 Principles Of Readability And Web Typography

# data[].attributes.attachment_link.description
Readability** is one of the more important aspects of Web design usability. Readable text affects how users process the information in the content. Poor readability scares readers away from the content. On the other hand, done correctly, readability allows users to efficiently read and take in the information in the text.

# data[].attributes.body
We'll have to check against the rules

# data[].attributes.attachment_link.description
TimeToast An easy-to-use and impressive timeline creator. Tiki-Toki Tiki-Toki is an impressive web-based timeline generator. If you want to create visually appealing timelines you can share...

# data[].attributes.attachment_link.title
Simple & Free Online Timeline Maker - Preceden

# data[].attributes.attachment_link.description
Preceden is a free, easy-to-use timeline maker that helps you create professional timelines for work projects, school projects, and everything in between.

# data[].attributes.attachment_link.readable_text
QR Code is a two-dimensional version of the barcode, typically made up of black and white pixel patterns. Denso Wave, a Japanese subsidiary of the Toyota supplier Denso, developed them for marking components in order to accelerate logistics processes for their automobile production. Now, it has found its way into mobile marketing with the widespread adoption of smartphones. "QR" stands for "Quick Response", which refers to the instant access to the information hidden in the Code.
Tell me more

# data[].attributes.attachment_link.title
QR Code Generator | Create Your Free QR Codes

# data[].attributes.attachment_link.description
QR Code Generator for URL, vCard, and more. Add logo, colors, frames, and download in high print quality. Get your free QR Codes now!

# data[].attributes.attachment_link.title
Weebly SEO - Adding ALT tags to Images on Weebly

# data[].attributes.body
Beautiful and easy to use!

# data[].attributes.attachment_link.description
Create color schemes with the color wheel or browse thousands of color combinations from the Color community.

# data[].attributes.body
Basic photo editing