Principles For Readable Web Typography by jennyyingdi

VIEWS: 11 PAGES: 26

									+




    Principles For Readable
    Web Typography
    Class 07 November, 30
+
    Principles For Readable Web
    Typography
    Readability is one of the more important aspects of Web design
    usability.

    Readable text affects how users process the information in the
    content.

    In all obviousness, you want users to be able to read your
    content and absorb it easily.
+



    Is yours site design readable?
+
    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.

    color can be used to create visual contrast, hierarchy refers to
    the difference in size between these elements.

    Hierarchy plays a huge part in how scannable a layout is.

    How scannable is your layout?
+
    Hierarchy
+
    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.

    Poor contrast will force the user to squint and make reading the
    body text almost painful.

    To achieve readable content it is good to stay in the range of
    black-on-white / white-on-black contrast.
+
    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.
+
    User-Friendly Headers
    Headers are a key element in typography, Web and print alike. 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 as well. 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.
+
    User-Friendly Headers
    Headers are a key element in typography, Web and print alike.

    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.

    It is important to provide ample space between the header and
    body text.
+
    Effective Headers
+
    Non-Effective Headers
+
    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.
+
    White Space
+
    Consistency
    Consistency provides users with a familiar focus point
    when they are scanning, and it helps to organize the
    content.

    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.

    The same goes for links, buttons, and other graphical
    elements.
+
    Consistency
+
    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.

    Find a balance between line height and letter spacing

    You want to avoid having your body of copy too compact
    nor too widely spaced.

    Step Back, ask yourself is it readable? Does it scan well?
+
    Density of Text
+
    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.

    This practice is termed as focus   points
    You do just that… provide points of focus for the user.

    Done right these points and objects help break up
    monotonous text.
+
    Emphasis of Important Elements
+
    Clean Graphical Implementation
    Every text body needs some sort of visual support,
    whether its an image, icon, graph or illustration.

    Provide sufficient space between the graphic and the text.

    If the graphical element is an image, a clean border is a
    good idea for providing separation from the text.

    Borders guide the user’s eyes and are good for adding
    style to content.

    For elements such as icons space is the only separator
    that should be used.

    The content should move cleanly around the graphic
    without disrupting the text.
+
    Clean Graphical Implementation
+
    Use of Separators
    Separators divide text into sections.

    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.
+
    Use of Separators
+
    Good Margins
    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 should not bleed into other layout elements,
    especially if it is a long article. Margins help define the
    article and its separation.
+
    Good Margins
+

								
To top