Typography hiệu quả trong thiết kế web tài liệu 100% bằng tiếng anh

Typography hiệu quả trong thiết kế web Typography hiệu quả trong thiết kế web Typography hiệu quả trong thiết kế web Typography hiệu quả trong thiết kế web Typography hiệu quả trong thiết kế web Typography hiệu quả trong thiết kế web

A Crash Course in Typography:

The Basics of Type

Typography could be considered the most important part of any design It’s definitely among the most important elements of any design project And yet it’s often the part of

a design that’s left for last, or barely considered at all Designers are often intimidated by typography, which can result in bland typographical design or a designer always using one or two “reliable” typefaces in their designs

[fblike]

This series aims to change that If you’re intimidated by typography, or even just aren’t quite sure where to start, then read on We’ll break down typographic theory and

practice,starting with the basics (so that everyone starts on the same page)

In this part, we’ll talk about the basics of typographic theory, including the different kinds of typefaces (and how typefaces and fonts differ), as well as the basic anatomy of a typeface And each part will also offer more resources for delving deeper into typography

Typefaces vs Fonts: Difference?

A lot of people use the terms “typeface” and “font” interchangeably But they’re two very distinct things Before we get started talking about typography, let’s get our terms straight

A typeface is a set of typographical symbols and characters It’s the letters, numbers, and other characters that let us put words on paper (or screen) A font, on the other hand, is traditionally

defined as a complete character set within a typeface, often of a particular size and style Fonts are also specific computer files that contain all the characters and glyphs within a typeface

When most of us talk about “fonts”, we’re really talking about typefaces, or type families (which are groups of typefaces with related designs)

Classifying Type

There are a number of different ways to classify typefaces and type families The most

common classifications are by technical style: serif, sans-serif, script, display, and so

on Typefaces are also classified by other technical specifications, such as proportional vs monospaced, or by more fluid and interpretational definitions, such as the mood they create

Serif

Serif typefaces are called “serifs” in reference to the small lines that are attached to the main

strokes of characters within the face Serif typefaces are most often used for body copy in

print documents, as well as for both body text and headlines online The readability of serifs online has been debated, and some designers prefer not to use serifs for large blocks of copy

Within the serif classification, there are many sub-types Old Style serifs (also called humanist)

are the oldest typefaces in this classification, dating back to the mid 1400s The main

characteristic of old style characters is their diagonal stress (the thinnest parts of the letters appear on the angled strokes, rather than the vertical or horizontal ones) Typefaces in this category include Adobe Jenson, Centaur, and Goudy Old Style

Transitional serifs date back to the mid 1700s, and are generally the most common serif

typefaces Times New Roman and Baskerville are both transitional serifs, as are Caslon,

Georgia, and Bookman The differences between thick and thin strokes in transitional typefaces are more pronounced than they are in old style serifs, but less so than in modern serifs

Modern serifs, which include typefaces like Didot and Bodoni, have a much more pronounced

contrast between thin and thick lines, and have have a vertical stress and minimal brackets They date back to the late 1700s

The final main type of serif typeface is the slab serif Slab serifs have little to no contrast

between thick and thin lines, and have thick, rectangular serifs, and sometimes have fixed widths The underlying characters hapes often more closely resemble sans serif fonts

There are four basic classifications of sans-serif typefaces: Grotesque, Neo-grotesque,

Humanist, and Geometric Grotesques are the earliest, and include fonts like Franklin Gothic and Akzidenze Grotesk These typefaces often have letterforms that are very similar to serif typefaces, minus the serifs

Neo-grotesque typefaces include some of the most common typefaces: MS Sans Serif, Arial, Helvetica and Univers are all neo-grotesques They have a relatively plain appearance when compared to the grotesques

Humanist typefaces include Gill Sans, Frutiger, Tahoma, Verdana, Optima, and Lucide Grande

These are more calligraphic than other sans-serif typefaces, and are also the most legible (hence the popularity of some of them for website body copy) They’re more calligraphic than other sans-serifs, meaning they have a greater variation in line widths

Geometric sans-serifs are more closely based on geometric shapes Generally, the “O”s in

geometrics will appear circular, and the letter “a” is almost always simple, just a circle with a tail They’re the least commonly-used for body copy, and are also the most modern sans-serifs, as a general rule

Script

Scripts are based upon handwriting, and offer very fluid letterforms There are two basic

classifications: formal and casual Formal scripts are often reminiscent of the handwritten

letterforms common in the 17th and 18th centuries Some scripts are based directly on the handwriting of masters like George Snell and George Bickham There are modern creations, too, including Kuenstler Script They’re common for very elegant and elevated typographical designs, and are unsuitable for body copy

Casual scripts more closely resemble modern handwriting, and date back to the mid-twentieth century They’re much less formal, often with stronger strokes and a more brush-like

appearance Casual scripts include Mistral and Brush Script

Display

Display typefaces are probably the broadest category and include the most variation The main characteristic is that they’re unsuitable for body copy and are best reserved for headlines or

other short copy that needs attention drawn to it Display typefaces can be formal, or

informal, and evoke any kind of mood They’re more commonly seen in print design, but are becoming more popular online with the use of web fonts

Also included among display typefaces are blackletter typefaces, which were the original

typefaces used with the first printing presses Since that time, better, more readable fonts have been developed

Dingbats and Specialty Typefaces

Dingbats are specialty typefaces that consist of symbols and ornaments instead of letters Wingdings is probably the best-known dingbat font, though there are now thousands, often created around themes

The typeface above is Jellodings

the same amount of space Narrower characters simply get a bit more spacing around them to make up for the difference in width Courier New is one example of a monospace typeface

Mood

The mood of a typeface is an important part of how it should be used Different typefaces have strikingly different moods Commonly used moods include formal vs informal, modern vs

classic/traditional, and light vs dramatic Some typefaces have very distinct moods For

example, Times New Roman is pretty much always going to be a traditional font, which is why it’s so commonly used for business correspondence Verdana, on the other hand, has a more modern mood

Some typefaces are more transcendent, and can convey almost any mood based on the

content and the other typefaces they’re combined with Helvetica is often considered one such font

Weights & Styles

Within the majority of typefaces, you’ll find more than one style and/or weight Weights are often classified as “light”, “thin”, “regular”, “medium”, “bold”, “heavy”, or “black” Each of these refers to the thickness of the strokes that make up the characters:

There are three general styles you’ll find with many typefaces: italic, oblique, and small caps

Small caps are often used for headings or subheadings, to add variety to your typography if using a single typeface

Italic and oblique are often confused or used interchangeably, but are two distinct styles

Oblique type is simply a slanted version of the regular characters You could create this using the “distort” function in Photoshop, although sometimes a separate oblique font is included within a typeface Italics are slanted like obliques, but are actually a separate set of characters, with their own unique letterforms

The Anatomy of a Typeface

The different letterforms within a typeface share a few common characteristics These

characteristics can be important in determining whether two (or more) typefaces work well

together, or clash Here are the most basic parts of a typeface:

The above image shows the different guidelines that are generally present in a typeface

Thebaseline is the invisible line that all the characters sit on Rounded letters sometimes sit just

a tiny bit under the baseline, and descenders always drop below this line A given typeface will have a consistent baseline

The meanline is the height of most of the lowercase characters within a typeface, and is

generally based on the lowercase “x” if there are varying heights among the lowercase

characters This is also where the term “x-height” comes from The cap height is the distance between the baseline and the top of uppercase letters like “A”

The above illustration shows three common parts to letterforms The stem is the main upright

of any letter, including the primary diagonal It’s could be considered the anchor of the

character The bar is any horizontal part, which are sometimes also called arms The bowl is

the curved part of a character that creates an interior empty space The inside of a bowl is a counter

The ascender of a lowercase character is any part that rises above the meanline, such as the uprights on the letters “d”, “h”, and “b” Descenders are the parts of a lowercase character that

drop below the baseline, such as in a “p”, “q” or “g”

Serifs are the extra flourish at the end of a stroke on serif typefaces Some typefaces have

verypronounced serifs, while others are barely distinguishable

The aperture of a character refers to the opening at the bottom of some characters, such as the uppercase “A” or lowercase “m” An ear is a decorative extension on a letter, as highlighted

on the “g” above Hairlines are the thinnest part of a serif typeface

Crossbars are horizontal strokes, as found on the uppercase “A” and “H” Terminals are only found on serif characters, and are the end of any line that doesn’t have a serif Loops are found

on some lowercase “g” characters, and can be fully closed or partially closed

Spurs are tiny projections from curved strokes, such as on some uppercase “G”

characters Linksconnect the top and bottom bowls of a double-stacked lowercase “g” The spine is the curved stroke found on the letter “s”

Tails are sometimes-decorative descending strokes, as seen on an uppercase “R” Finials are the tapered endings of some strokes Shoulders are any curved stroke that originate from a

stem

A Crash Course in Typography:

Paragraphs and Special

Characters

Body copy makes up the majority of many websites Headlines and other bits of

typography are often considered more fun to design, or more artistic, but without a good design for your body copy, your overall project will suffer

[fblike]

Body copy design requires you to consider two separate parts: character styles, and paragraph styles Proper use of special characters can greatly increase the level of

professionalism in your designs And good paragraph styling can make a huge difference

in readability, and therefore the amount of time someone is willing to spend reading your copy

Using Special Characters

There are a number of special characters you can use in your typography designs that add a level of polish and sophistication that is lacking from many designs Incorporating these

characters takes some extra time on the part of the designer, but the end result is almost always worth it

Ligatures

Ligatures are sometimes considered antiquated, and don’t show up often in web type They’re not seen much more often in print design, either But if your goal is to create a typographic design that has an antique, traditional, or very formal look, adding ligatures can be a fantastic way to reinforce that design style Ligatures can also improve readability among certain

characters, in certain fonts (especially italics and obliques)

If you want to use ligatures in your designs, there’s a great CSS declaration you can use to implement it in Safari, Webkit-based browsers, and Chrome: text-rendering: optimizeLegibility; Firefox is already using this rendering setting for font sizes over 20px There are a few glitches

with using this declaration, which are detailed in the Aesthetically Loyal article about Browser Kerning-Pairs and Ligatures

Cross-Ligatures are most commonly used for the following character pairs (shown regular and italic):

Hyphens and Dashes

Hyphens and dashes are two of the most improperly used characters in typography Hyphens should only be used when hyphenating words There are two different kinds of dashes: the en-dash and the em-dash An en-dash is shorter, roughly the width of the letter “n” in a particular font (hence, the name) An em-dash is wider, roughly the width of the letter “m”

En-dashes should be used when showing a range (such as January–March) or when creating an open compound word (South Carolina–Georgia border) To create an en-dash, just use – The em-dash is used mostly in informal writing, and can replace commas, semicolons, colons, and parentheses They’re often used instead of commas to set apart independent clauses or an abrupt change of thought To create an em-dash, use —

Smart Quotes

Smart quotes (sometimes also called “curly quotes”) are quotation marks that turn in toward the text they surround There are both double and single smart quotes, and each requires a different html code Smart quotes are often created automatically in word processing

programs, but can be a huge pain for web typography

Some CMSs, like WordPress, automatically convert quotes to smart quotes While this is good in most cases, it can also cause problems, especially if you post code snippets on your blog (as you don’t want code snippets to contain curly quotes) In general text, though, you’ll want to use smart quotes for a more polished look in your body text

Ampersands

Ampersands (‘&’) are another special character that are sometimes used in typographic designs

To create an ampersand, just use & They work well in headlines and similar short blocks of text, but aren’t really appropriate for body text (despite the fact that many people seem to use them that way)

Ampersands are appropriate for use artistically, or in instances where space is limited (like in a table) Don’t use an ampersand just as an abbreviation for the word “and” If using an

ampersand artistically, you may find that ampersands in italic fonts are more attractive than their regular counterparts Italic ampersands tend to follow the older style, and closely

resemble the letters “e” and “t”, which make up the Latin word “et” (which translates to “and”)

Other Special Characters

Other special typographic characters include things like trademark (™), registered (‘®’), and copyright (‘©’) symbols, tildes (‘˜’), and pilcrows (‘¶’), among others

If you use any of the above characters, make sure you use the proper entity codes for a

professional and polished final result About.com has an extensive table of entity codes for various typographical symbols and punctuation marks that makes a great quick-reference guide

An additional note about pilcrows: using these rather than actual paragraph breaks can be an interesting technique for article intros that consist of multiple short paragraphs Just make sure that you don’t use them throughout a long document, as they convert the entire document into one long text block, which is harder to read, especially onscreen

Character and Word Spacing

The space between characters and words can be broken down into a few different areas The basics are kerning, tracking, and word spacing Kerning, which is the space around specific characters, is generally done automatically within individual font files Programs like Photoshop

or InDesign give you some control over kerning between individual characters, but on the web it’s mostly impractical

Tracking is similar to kerning, but isn’t character-specific The tracking can be adjusted easily with CSS, using letter-spacing For the most part, adjusting the tracking of your text shouldn’t be overdone But it can be used to great effect in small blocks of text It’s most often seen in headlines or menus Overdoing it can result in text that is difficult to read

One place you’ll always want to use letter spacing is between strings of capital letters

(includings small caps) and strings of numbers Set a letter spacing of around 1em between capital letters, small caps, or numbers to improve legibility

Word spacing can greatly improve readability if done correctly, as it makes word recognition easier People often read words just by recognizing their shapes, and increasing the space slightly around each word can speed up this process Word spacing is accomplished in CSS with word-spacing Word spacing, by default, is 25 ems It should be specified in ems, so that it adjusts according to text size Also, word-spacing adjustments are made in relation to the default spacing So if you specify a word spacing of 0.25 em, you’re actually getting a space of 5

em between words

Paragraph Formatting

The paragraph is often referred to as the most basic unit of language that has meaning

Paragraphs are the building blocks of text content, and yet all too often, designers do little more than specify the font face and size There’s a host of other formatting options we should

be considering when we format our paragraphs

There are a few things to take into consideration beyond the choice of typeface The goal of typography at the paragraph level is to create text that is highly readable To that end, we need

to consider the alignment of our text, as well as the line spacing and line width

Alignment

There are four basic alignment types: left, right, center, and justified As a general rule, centered type is harder to read It’s fine for headlines or things like photo captions But for paragraphs, it’s not suitable This is due to the fact that ragged edges on the left-hand side of a paragraph reduce legibility (because readers have to search for the beginning of each line)

Right-aligned text presents the same problem as centered text for paragraphs As a general rule, stick to either left-aligned or justified alignment for long blocks of text

Line Height and Leading

In the days of hand-set print type, leading referred to the space between lines The term comes from the literal strips of lead that were used to put extra space between lines of letters Line height is similar to leading, except it refers to the overall height of lines, including the letters and space above and below them

In CSS, you can adjust the line height to whatever you want Line heights that are anywhere from 1.2x to 1.8x as tall as the text itself are generally the most readable For example, if your text is 12px high, then your optimal line height would be between roughtly 14px and 22px Play around with line heights until you find something that looks good for your particular project

You can see here how much easier text is to read at a taller line height

Line Width

There are a few different theories regarding the perfect line length Of course, the specifics between each vary There are three basic ideas, though:

 Line widths of roughly twelve words

 Line widths of roughly 39 characters (alphabet-and-a-half rule)

 The points-times-two rule (which requires some math to convert it to work for the web)

The last one is really the only one that requires any explanation If you multiply the size of your point times two, and then use that in picas rather than points, you’ll get your line width In print design, this is easy enough to figure out If, for example, your text height is 11 points, you’d have a line length of 22 picas (or just over 3.5″)

It takes an extra step to convert that to web use Take that pica measurement you just got (multiply your text’s pixel size rather than points), and multiple it by 12 (because there are 12 points in a pica), and that will give you your line width in pixels

For some examples of fantastic paragraph styles, check out Jon Tan’s 12 Examples of Paragraph Typography

Great Paragraph Typography in Practice

Vogue Magazine

The typography used in the paragraphs on the Vogue Magazine site has an obvious focus on readability Generous line heights and a 14px font make reading even long blocks of text a breeze onscreen In addition to the type size and spacing, using a very dark gray also makes the type more readable

The basic code for this paragraph style is:

p {color: #333333; font-size: 14px; line-height: 24px; text-align: justify; font-family: Georgia,"Times New Roman",Times,serif;}

Sleepover, San Francisco

Sleepover applies a number of excellent attributes to their paragraph styling First of all,

headings are the same size as the body copy, but capitalized, with proper letter spacing:

{letter-spacing: 2px; text-transform: uppercase;}

The paragraphs themselves are also well-formatted Font size is kept to 1 em, with a 1.85em line height (slightly larger than “normal”) The gray letter color is very easy on the eyes, though it might be too light for the taste of some The added line height is extra important in cases like this, where there are other stylistic choices that might decrease readability Here’s the basic paragraph code:

p {font-size: 1em; line-height: 1.85; color: #666666; text-align: justify; font-family: "Century

Schoolbook",Century,Georgia,serif;}

Salt of the Earth

Salt of the Earth uses a larger font than is commonly seen for body copy They also use very generous line heights Rather than lowering the contrast of the type by lightening the font, they’ve opted to use a darker background and a black font It still results in easier-to-read text than black on white would be Ample spacing between paragraphs is also used, which adds to scanability and breaks up long blocks of text

The basic styles for this paragraph are:

p {font-family: Georgia,"Times New Roman",Times,serif; font-size: 16px; line-height: 30px; bottom: 30px;}<

margin-The Design Cubicle

The Design Cubicle uses what looks like a smaller font than any of the other examples here, and yet maintains similar readability The other main difference here is that they use a sans-serif typeface (and an @font-face font, rather than a web-safe font), which is arguably more readable onscreen (the reverse is usually considered true with print typography) Contrast is good, with a medium gray background and a dark gray font

Here’s the basic code for this paragraph style:

p {margin-bottom: 1.5em; font-size: 14px; line-height: 21px; font-family: dagny-web-pro-2",Verdana,sans-serif; font-weight: 400; color: #232D32;}

"ff-dagny-web-pro-1","ff-A Crash Course in Typography:

Principles for Combining

Typefaces

When combining typefaces, there are a couple of important principles you’ll need to keep

in mind, namely contrast and mood Effectively combining typefaces is a skill best

learned through practice, and trial-and-error Once you’ve mastered the principles

covered here, you’ll have the tools you need to try out combinations while making

educated guesses about what will and won’t work together

[fblike]

Here, we’re mostly covering combining two typefaces, as you would for body copy and headlines In the next part, we’ll cover combining more than two typefaces for things like navigation, image captions, and more

Contrast

Contrast is one of the most important concepts to understand when it comes to combining

typefaces Without proper contrast, typefaces tend to clash, creating a random, scattered look

to your designs (and not in a good way) Creating proper contrast relies on a few principles, all

of which are discussed below

But first, what exactly is contrast? Contrast is the amount of difference between two typefaces Typefaces that are too similar tend to clash Your mind doesn’t instantly recognize that they’re different typefaces, and when it finally does, it’s jarring Typefaces that are too dissimilar can appear haphazard and accidental, which can be just as jarring

Weight

The weight of a typeface plays a huge role in its appearance We often think of weight in terms

of “light”, “regular”, “medium”, “bold”, etc But different typefaces have varying weights to begin with Combining typefaces based largely on weight is a fairly straight-forward way of creating typographic contrast

You’ll want to look for typefaces that have noticeable difference in weight, without

being tooextreme Very extreme differences in weight need to be made up for with similarities

in other respects, particularly structure and style

Style and Decoration

The style of a typeface has a huge impact on how it’s received Generally, when working with

styles, you’re going to be either using regular or italic styles Underlines are also used, but in web design, they should only be used for links (otherwise, they’re confusing) Other decorations include things like outlines or drop shadows, both of which can be used to unify varying

typefaces

Style and decoration can also be used to create contrast within a type family or typeface

Combine regular and italic fonts, varying weights, and things like shadows or outlines to create variation within a font family and sufficient typographic contrast

Scale and Hierarchy

The scale of typefaces, or their size relative to one another, is another important factor in combining typefaces The hierarchy of different elements within the design is greatly

influenced by the scale of the typefaces used For example, your headings should obviously be larger than your paragraph copy To the same end, your H1 headings should be larger than your H2 headings, and so forth

As a general rule, your hierarchy should start with your H1 heading being the largest, and your

meta information or captions should be the smallest You need to balance the differences in scale with differences in weight and style, too, so that you don’t have too much variation in size between your largest and smallest fonts

Classificiation

In general, when combining typefaces, you’ll want to choose ones that aren’t from the same

classification Combine a serif and a sans-serif, or a serif and a script, etc., and you’ll have a much easier time coming up with a combination that has proper contrast and doesn’t clash

Combining typefaces within the same classification is sometimes possible, but there are some extra considerations For one, you want to find typefaces that are different enough that they’re immediately recognizable as different typefaces, while also using typefaces that have similar

moods, structures, and other factors that tie them together To some extent, trial and error is

your best bet for finding typefaces within the same classification that can work together

One trick is to choose typefaces that are in the same general classification, but fall under different sub-classes (such as a slab serif and a modern serif, or a geometric sans serif with a grotesk) This provides more contrast right from the start

Structure

The structure of a typeface plays a huge role in how it works with other typefaces You either

need to choose typefaces that have very, very similar structures, or very different structures Letterforms that are only a bit similar are going to clash Typefaces that are very different in other ways can be unified by their similar structures, though the reverse rarely works as well

Look at the letterforms side-by-side and see if they share a similar shape or other factor (such

as x-height) It’s better to go with wildly different structures than structure that’s almost the same but not quite

Color and Texture

When you need to add visual contrast or unify disparate typefaces, the use

of color and texturecan do wonders For example, when you need to add contrast among

typefaces that are nearly identical (or within a single type family), changing the color of some elements instantly adds interest Adding texture has the same effect

Alternatively, if you have wildly different typefaces, color and texture and unify those typefaces, creating a harmonious look The principles of color theory still apply to typography, so be sure you don’t go overboard combining colors

Extreme Contrast

Extreme contrast can be a great option if you’re working with display or script typefaces In

these instances, it can be difficult to find typefaces with good contrast that aren’t too dissimilar

So rather than trying to do that, go for completely different typefaces Try combining a rather simple typeface with something more elaborate for the best results, rather than two elaborate typefaces

Mood

The mood of the typefaces you select is vital to the way they work together Mood can be

anything from formal to casual, fun to serious, modern to classic, or anything in between This

is where a lot of people run into trouble with combining typefaces Selecting typefaces that not only have similar (or complementary) moods, but also have moods to match the project you’re designing is crucial

Examples

Oak Street Bootmakers

Oak Street Bootmakers Uses a combination of Hoefler Text and Franklin Gothic, both of which are very classic typefaces It creates an image that is steeped in tradition

Pound & Grain

Pound & Grain combines two serif typefaces, as well as a sans serif on their home page The two serifs work well together because they belong to different sub-classes

Burciaga

Burciaga combines three distinct typefaces: Droid Serif, Georgia, and Dancing Script Droid Serif and Georgia work surprisingly well together, and Dancing Script adds extra elegance

Stuart Bicknell Photography

Stuart Bicknell Photography uses font size and style to create contrast on the site, depsite the fact that virtually all of the typography is Times New Roman (there are a few small touches of Arial)