8 Trending Website Design Patterns For

Online Businesses
https://www.fatbit.com/fab/8-trending-website-design-patterns-online-businesses/

Steve Jobs once famously said that “Design is not just what it looks like and feels like.
The design is how it works.” For a long period of time, websites globally have been built
on the same notion.
New technologies came to the forefront and changed the way websites looked and felt.
No matter, how innovative you get with your website design, in the end, it all boils down to those
words said by Steve Jobs. It is all about how it works and not just how it looks.
The fact of the matter is that design is just a means of presenting content in the most intuitive
and feasible manner. You can put in as much creativity as you want; in the end, if your design
does not offer proper information to help your customers reach certain point then it is of no use.
However, certain design patterns are timeless. These UI patterns not only focus on the best
design practices but also emphasize on ensuring the information reaches the users seamlessly.
In this post, I will explore different real life examples of some successful web layout patterns.
Cards
This type of design pattern is popular among social media websites as it helps in displaying the
details for each item without cluttering the whole web page. Additionally, websites with a heavy
dose of content can use this pattern to trim the content and display it in a digestible manner.
In such layouts, cards act as a container for clickable information, which means that the cards
just highlight the gist of the information and to get detailed information on it, the user can click
on that particular card. The best part of this design patterns is that it gels well with the
responsive design and is self-sufficient to fit any type of screen size. The most popular
examples of such UI patterns is Facebook, Twitter and Google Plus.

Tips For Using Cards Layout

● Ensure that the whole card is clickable, rather than just a small portion or link.
● When selecting images keep different screen sizes in mind
● Try to keep it simple as cards only work best when they are not too complex; best with a
basic typography and minimal description.
Grids
Like Cards, there is another design pattern called Grids that is popular among content heavy
websites. However, unlike Cards, the information shared using Grids highlights the most crucial
details identically. This makes browsing seamless and offers better options for styling. Web sites
like YouTube and Etsy use this pattern offering a straight-laced feeling.

Tips for using Grids layout

● While using grids always keep white spaces in mind as that would ensure that each item
looks presentable.
● Keep the layout consistent and the size of grids identical
● A standard practice is to use a 12-column grid layout for simplicity
Magazine
This design pattern has been prominently used across blog based websites and online news
portals. It is useful for those websites that have regularly updated content across several
verticals. It not only makes the website intuitive but also breaks the monotony of the website
while showing a variety of content. Websites like Wired and Time use this design pattern across
their domain.

Tips for using Magazine layout

● Emphasize on images as it is the core of this layout

● Sublet your content into different sections and follow same design across them.
● Have either a horizontal or vertical menu
Container-free
Minimalism came out as a buzzword in web design arena last year. As Apple and Google took
the approach towards flat design, most of the websites also ushered in the same strategy while
presenting information on their website. The container-free pattern takes that approach to a
whole new level, stripping away all the unnecessary illustrations. Up till now, most of the web
design have been based on linear and structured layouts, but we are gradually moving away
from it, by thinking out of the box. This is a good approach to ensure that the​ ​website design
does not get boring​.

Designing a website​ without containers puts all the focus on the content and visual hierarchy.
Apple and Google both have used this pattern to highlight their product lineups. ​Even Ablysoft
has used this approach in their latest redesign.
Tips for using Container-free layout

● Focus on typography and use it accordingly to divide different sections

● Use contrasting colors to make it easy to differentiate between sections
● Keep the content short and precise. Ensure that your images are able to entice visitors
Single-page Web Apps
As website designing has evolved, it has brought web applications to the center stage. Rather
than having a multipage navigation system, users nowadays prefer a single page site better
known as web apps. Such designs use AJAX to load content asynchronously while combining
multiple actions on a single page. Other than web applications, such pattern is also popular
among websites where the homepage serves for different sections of the website. Gmail,
Spotify, and Tumblr are some of the websites, which incorporate this design pattern.

Tips for using Single page web apps layout

● Generate unique URLs for each viewpoint or section in order to ensure support for the
back button.
● Sticky navigation is a must for single page web apps
● Apply smooth scrolling techniques to make the user experience less jittery.
F Pattern
For a larger part of the last decade, websites especially text-heavy ones have used F pattern
design. Studies show that putting a lot of text on the website results in positive response from
users; they respond better if the website has an F pattern design. This is because our brains are
hardwired to scan in F pattern.
By using this pattern, you can create a pathway for the user’s eyes to go where they tend to go
normally. This also gives designers room to highlight content they want users to emphasize
upon, and in turn impacts conversions to a great extent. Web sites like The New Yorker and
other prominent​ ​ecommerce​ businesses use this design pattern on their websites.

Tips for using F-Pattern layout

● Keep all the CTAs on either left or right side of the page to ensure that users either start
reading with a CTA or end reading with a CTA.
● Start each section with a catchy phrase
● Use right side column for relevant but lesser important stuff as it falls outside scanning
area.
Z Pattern
Other than F pattern, our brains also respond well to the Z pattern. In fact this design pattern is
highly effective when it comes to incorporating CTAs (call to action) into the website. Most
business websites nowadays use this pattern effectively, as this design pattern is better suited
for websites with singular goals involving less content.
When you want to direct users to specific points on the website, eventually enticing them into
taking an action then Z pattern is the best choice.
TripAdvisor, McDonald’s, KFC etc. all use this design pattern across their websites.

Tips for using Z-Pattern Layout

● Place the CTAs at the right side or along the end of a line, as users tend to pause before
moving to next line giving you time to entice them.
● For the most crucial CTAs, use the upper right corner
● Repeat the pattern multiple times on a single page; it will help users get accustomed to
the pattern.
Asymmetry
There are more than a billion active websites, and this has made it imperative for designers to
think outside the box. In order to ensure that specific content stands out on the website,
designers have started to use an asymmetric design pattern. This design pattern allows the
website to appear less plain and more energetic. However, one has to be very careful in
implementing this style as misplaced asymmetry can often lead to confusion and can distract
the user. Some of the great examples of websites that use asymmetric design patterns include
Honda and Esquire.

Tips for using asymmetric layout

● Use distinctive colors to break symmetry ensuring that those sections pop out.
● Text alignment is crucial in this layout therefore always keep it left aligned.
● Try different shapes like diamond, a triangle with sharp images rather than square or
circle to add more visual weight.

Over the years, we have come across several intuitive website designs, which have stretched
our imagination. However, innovative they, some patterns are timeless and have the capability
to stand the test of time. The above-mentioned design layouts have been in practice for a long
time and will continue to be in the long run.
Visual Design Terms Cheat Sheet
Visual design dictates how interactive elements look in an interface. It influences the user
experience in many ways; for example, it:

● affects legibility
● creates visual balance on the page
● coaxes the eye to move toward certain page elements
● directs users toward actions
● builds trust and credibility
● reinforces the brand

Given its importance, all UX designers (and everyone on crossfunctional development teams)
should have at least a baseline understanding of visual design and share a common language.
But even proficient UX designers are not always versed in visual design, and few teams are
able to create a solid common vocabulary. That difficulty can lead to hours of back-and-forth
communication, countless unnecessary revisions, and costly misunderstandings. Conversely,
good communication about visual design can make a site or application truly delightful and
streamline design iterations.
This cheat sheet can plant the seed for a common visual-design vocabulary for your
cross-functional team. We have chosen this collection of terms because they are either most
important or most misunderstood. The topic areas include:

● Graphics
● Color
● Visual weight
● Types of images

To help illustrate some of these definitions, I am going to employ the assistance of my

officemate, Finley:
 ​A photograph I
took of my dog, Finley, this past Christmas. What a good boy.
Note: We use the phrase​ visual element​ or e ​ lement ​to refer to an image, a page, or a fragment
of a page or of an image.
Brightness: ​the balance of light or dark colors that an element has (not to be confused with
contrast, see below) or the density of light or dark colors within an image
When overall brightness is increased, all colors, foreground and background, are made
lighter — that is, closer to white (complete lightness). When brightness decreases, all colors
are darker and closer to black (complete darkness). Manipulating brightness in any visual
can influence how easy it is to distinguish details. If something is too bright or too dark, the
visual might be washed out or hard to see.

The original picture of Finley was taken at night, and the photo is dark. When we decrease
brightness, details become more difficult to see. Slightly increasing brightness makes the
image’s colors brighter, but also eliminates some details, like the edges of Finley’s ears
(identified by the pink arrow in each frame) which blend into the background in the brightest
frame.
Brightness of an interface can also influence the overall tone and brand identity. Take these
two websites of two different investment banking companies, which have similar layouts
above the fold​, but with different hero image choices. Betterment opts for a darker (low
brightness) hero image (with the exception of the woman’s face, whose complexion results in
more ​contrast​, see below) and slightly brighter buttons, while Wealthfront uses a brighter
hero image (albeit with lower contrast due to the presence of pastels, see below) and layout
with dark buttons. The brightness of the image and the darkness of the buttons ultimately
influences the contrast (see below).
The Betterment site (top) features a dark hero image with dark buttons, while the Wealthfront
site (bottom) features a brighter hero image with dark buttons.

Contrast ​(also known as ​gamma​): the difference between the light and dark components of
a given element
The differences in light and dark tones add visual interest that make the image strong (or as
some say, “bold” or “pop.”). Contrast is important for readability and can help draw the
viewer’s eye toward important details.
Slightly increasing contrast makes the shadows more noticeable. Decreasing contrast makes
the picture less defined and thus, makes it harder to distinguish the details. Increasing contrast
too much makes parts of the image too bright, which is uncomfortable to look at, especially for
long periods time.

Density: ​quantity of visual elements in a given area or space

High-density pages are sometimes referred to as “busy” or “crowded.” Low-density pages
have few components (e.g. text, colors, or textures) and use negative space or white space
(i.e.,areas with no content —see below). The definition of density applies to images, pages,
and displays. Pages or displays with very few components are often referred to as simple or
minimalist (see below).
If there are too few components on a page (which may not even warrant a dedicated page),
users may not have enough​ ​information scent​ to confidently navigate that page. Conversely,
too many components on a page can cause sensory overload and increase the task time or
the chance that people will ignore relevant information. There will always be a tradeoff
between how dense a page or display is and how much​ ​interaction cost​ or​ ​cognitive load​ that
page will cause or require.
The wireframe on the left has higher density than the one on the right, with many elements filling
the space on the page and less negative space.

Duotone​ (meaning “two tones”): a color profile comprised only of different shades of two
contrasting colors, with no other colors present
In order to qualify as duotone, there must be enough contrast between the tones for them to
be considered two different colors. For example, light pink and dark pink would qualify as
monotone, but not duotone, while purple and yellow are two different colors, and would
qualify as duotone.

Grayscale​ (also known as​ black & white​): a color profile composed of only black-and-white
tones or shades of gray, with no other colors present
Grayscale is an example of ​monochrome​ (see below), but not all monochrome images are
grayscale.

Minimalism​:​ ​a low-density aesthetic style​ in which a design provides the bare minimum
components needed to fulfill some purpose
Minimalism​ can apply to a page, an image, or a design. While minimalism may have
aesthetic value for some audiences,​ ​it does not necessarily make a design easy to use​ (see
density above).
 Monochrome​ (meaning, “single color”): a color profile composed only of different shades of
a single color, with no other colors present
Contrary to popular belief, monochrome is not only black and white, and monochrome
images do not have to be grayscale. They can be any color, as long as every color in that
image is a lighter or darker shade of that one color.

The first image is monochrome and in grayscale — the only colors used are varying shades of
black. The second image is monochrome, but this time in pink. The last image is duotone —
incorporating shades of purple and black.

Negative space​ (also known as ​white space​ or ​isolation​): space which lacks text, graphics,
or foreground colors
A visual element (such as a page or an image) with enough negative space can seem less
busy or crowded. Some people refer to negative space as “breathing room” between
elements — be it within a photograph or between interface elements on a screen (see
density).
Note: While the term white space includes the word “white,” negative space is not
necessarily white. For example, a white square would not be considered negative space if
placed on a green background, but the green area would be. However, if the square was
green, and the background was white, then the white area around the square would be
considered negative space.

Pixel: ​tiny unit of light emitted from a screen (an abbreviation for the words “picture
element”)
Each pixel can appear as only one color at a time. To confuse things further, the word pixel
(abbreviated “px”) is also used as a measurement unit for sizes on web pages. So a 1-px
 element can actually can encompass multiple physical pixels (actual light-emitting dots on
the screen) on high-DPI screens.
Saturation: ​how intensely colors appear in any given element
This term is also used in print; the word literally means “filling to excess” or “soaking.” You
may have heard saturated images referred to as “bold” or “vibrant in color.”
Highly saturated elements have bright, bold colors such as neon green, bright red, or electric
blue, while less saturated elements have neutral tones (closer to black, white, or grey) or
muted (or pastel) colors like mint, blush, or periwinkle.

As saturation is decreased, colors appear more neutral and less intense.

Color intensity affects readability; if text is too highly saturated it can strain the eyes. Color
intensity can also influence brand perception — intense colors are often perceived as “lively,”
“bold,” or “young,” while neutral colors tend to be perceived as “calm,” “mature,” or
“grounded.”

As saturation increases, the intensity of colors increases. As saturation decreases, color hues
become less vibrant until the image is devoid of all color except gray tones.

Texture: ​the varied layers in a given area of a visual element

Akin to fabric texture, which includes woven fibers and objects laid in the foreground and
background, a highly textured digital element also has multiple layers. In an image, texture
might be a sense of 3-dimensional space created with shadows and angles, while an
interface might use overlapping elements such as text on top of a background image, or a 3D
 button with text on it to provide a sense of texture. Texture and depth can help draw the eye
toward important details and set a tone for the design.

In the first image on the left the rectangle has little texture and one layer (arguably two if you
count the text shadow effect). In the second frame, texture is increased with two layers: the
yellow rectangle added behind the shadowed text. In the third frame, texture is higher with the
addition of Finley’s photograph, which has layers in itself.

Visual balance: ​when all components of an element have similar ​visual weight​ (see below)
and each element appears as strong (or weak) as the other elements on the page

Symmetrical balance:​ Similar objects evenly distributed across a page, screen, or

element

Asymmetrical balance: ​Dissimilar objects but of equal visual weight distributed across a
page, screen, or element
The wireframe on the left is symmetrically balanced because the elements are similar and are
evenly distributed across both vertical halves of the page. The wireframe on the right is
asymmetrically balanced because some elements are not the similar to their counterparts on the
other side of the page, yet have similar visual weight. For example, the button in the top right
(identified by the red arrow) is smaller than the button in the top left, but it is a darker color and
has high contrast with the page background, which increases its visual heaviness and makes up
for its smaller size. The top right button draws attention while still maintaining visual balance
overall. The images and text blocks are different, but are also balanced in visual weight because
the text is highly dense that balances with the low-density images. Both types of blocks are also
equal in size.

Visual weight: ​how prominent an element appears compared to everything surrounding it

The more visual weight an element has, the more it draws the viewer’s eye. Weight is
typically influenced by one or more of the following visual attributes: contrast, size, density,
texture, color, and negative space. The more distinctive the visual attributes are, the greater
the visual weight will be.
Increasing or decreasing visual weight of certain elements can help guide the eye toward
high-priority details within a design.
Types of Images
Raster image​ (also known as bitmap image, including .JPG, .PNG or .GIF files): an image
whose size is static and is composed of pixels (as opposed to ​vectors​ — see below)
In essence, a raster image is a collection of individually colored dots which, from a normal
viewing distance, appear as a single graphic. When a raster image is zoomed in on or
stretched, the pixels are more defined and visible.
A raster image can be one of many different file types, however certain file types perform
better than others in specific contexts. In UI design, for example:

● .png files enable transparency while .jpeg/.jpg does not

● .jpg files can often be smaller and quicker to load; however, image quality may also
degrade when scaled

Vector image​ (including .SVG files): an image which can be scaled easily without losing
accuracy or modified because the file contains mathematical calculations for every shape
in the image
These are typically used for images that are not photographs, such as logos, icons,
diagrams, or other graphics.

(Top) Zooming in on the top half of the letter “g” on a raster version makes the image fuzzy or
pixelated. (Bottom) Zooming in on a vector version of the image preserves the image quality
because the image infinitely scales according to the equations in the file.
Typography Handbook
A concise, referential guide on best web typographic
practices.

Table of Contents

1. Introduction
2. Typographic Design
○ Visual Hierarchy
○ Gestalt Laws In Typography
3. Fonts
○ Choosing Fonts
○ Web Font Formats
○ Font Loading
○ OpenType Features
4. Web Style Guide
○ Relative Units
○ Containers
○ Font Sizing
○ Vertical Spacing
○ Color
○ Underlining
5. Conclusion

Introduction
Typography is more than just what fonts you use. Typography is ​everything​ that has to do with
how text looks – such as font size, line length, color, and even more subtle things like the
whitespace around a text. Good typography sets the tone of your written message and helps to
reinforce its meaning and context.
This is a handbook on best typographic practices through the lens of a web designer. It is meant
to be short and concise – used as a reference rather than explanatory. For in-depth
explanations and details, look at the links in the ​Further Readings​ of each section instead.
Lastly, this handbook is open source on​ ​GitHub​ and will continuously be updated with the best
practices. Enjoy.
Typographic Design
Visual Hierarchy
Visual hierarchy is the concept of organizing elements on a page in a way that establishes an
order of importance, allowing readers to easily navigate the page and find relevant content.
When done correctly, it should guide the reader's eye throughout different sections of the page.
Visual hierarchy is very prevalent in typography, and forms the basis of typographic design
theory.
Consider the following typographic design of ​Alice's Adventures In Wonderland​, which clearly
establishes a visual hierarchy:
Click here​ to view the web version of this design
Visual hierarchy can be broken down into 5 different parts:

1. Size & Weight:​ Size and weight are the two easiest ways to create visual hierarchy.
They easily indicate what is important, and readers' eyes naturally jump to them. By
simply styling those two, a sense of importance is already created.
2. Positioning: ​Positioning is another way to create visual hierarchy. Here, the title and
author is above the rest of the text and centered, showing its importance.
3. Typeface:​ Contrasting typefaces can create a distinction between different elements
and achieve visual hierarchy.
 4. Color: ​Setting important text in a different color is a very easy way to create visual
hierarchy. However, only do so sparingly as using color everywhere causes it to lose its
distinction.

Further Readings:

● Visual Hierarchy: How Well Does Your Design Communicate?

● Creating Exciting And Unusual Visual Hierarchies

Gestalt Laws in Typography

Gestalt principles, or gestalt laws, are rules of the organization of perceptual scenes. When we
look at the world, we usually perceive complex scenes composed of many groups of objects on
some background, with the objects themselves consisting of parts, which may be composed of
smaller parts, etc.​ ​Scholarpedia
The two most important Gestalt Laws to understand in typography are the Law of Proximity and
the Law of Similarity.

Law of Proximity
To master the positioning of elements, it is crucial to understand the Gestalt Law of Proximity.
The Law of Proximity states that humans perceive objects that are closer together as related
objects. And vice versa, objects that are farther apart are perceived as different groups.
Image source
In typographic design, "proximity" refers to the amount of whitespace created by line height,
margin, and padding. There should be a distinctive and noticeable amount of ​additional
whitespace between two different sections. Consider the following example:
Note that the Law of Proximity does not mean that you should squeeze related content in a
small container. No, free flowing whitespace is important too. Simply add noticeable, additional
whitespace between two separate sections.

Law of Similarity
The Gestalt Law of Similarity states that entities that look similar tend to be grouped together.
For example, if all clickable texts are sky-blue, the audience will assume that all textual content
that is sky-blue is clickable.
In typography, the law of similarity just means to keep your styles consistent on elements that
serve the same function. Group of elements should also look similar to other groups that serve
the same function, for example: the visual styles of one blog post should look similar to another
blog post. On the other hand, elements with a ​different​ functions should not look similar to one
another.

Further Readings:

● Gestalt Theory in Typography & Design Principles

● Proximity, Uniform Connectedness & Good Continuation

Fonts
Choosing Fonts
Choosing fonts is a creative and emotional process. Different fonts convey different feelings,
and you want a font that complements the tone of your text.

● Start by finding a good font for your body text. When combining multiple fonts, keep your
body font constant, and try to find other fonts that go well with it
● Use tools such as​ ​TypeTester​ and​ ​TypeCast​ to help you experiment
● Get inspired by others!​ ​Fonts In Use​ features a large collection of great font choices.
● Some fonts were designed to be used as large-size headings, while others were
designed to be used in small-density screens. Use fonts in their intended roles.
WebType​ is a great resource for finding the “intended size” of different fonts. In addition,
TypeKit​ labels its font as either Heading or Paragraph.

Further Readings:

● Selecting Typefaces For Body Text

● Five Principles For Choosing And Using Typefaces
● Best Practices For Combining Typefaces

Using Web Fonts

To declare custom web fonts, use the following syntax:
@font-face {
font-family: 'Helvetica Neue';
src: url('/assets/fonts/HelveticaNeue-Light.eot');
src: url('/assets/fonts/HelveticaNeue-Light.eot?#iefix') format('embedded-opentype'),
url('/assets/fonts/HelveticaNeue-Light.woff2') format('woff2'),
url('/assets/fonts/HelveticaNeue-Light.woff') format('woff'),
url('/assets/fonts/HelveticaNeue-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}

@font-face {
font-family: 'Helvetica Neue';
src: url('/assets/fonts/HelveticaNeue-Bold.eot');
src: url('/assets/fonts/HelveticaNeue-Bold.eot?#iefix') format('embedded-opentype'),
url('/assets/fonts/HelveticaNeue-Bold.woff2') format('woff2'),
url('/assets/fonts/HelveticaNeue-Bold.woff') format('woff'),
url('/assets/fonts/HelveticaNeue-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'Helvetica Neue';
src: url('/assets/fonts/HelveticaNeue.eot');
src: url('/assets/fonts/HelveticaNeue.eot?#iefix') format('embedded-opentype'),
url('/assets/fonts/HelveticaNeue.woff2') format('woff2'),
url('/assets/fonts/HelveticaNeue.woff') format('woff'),
url('/assets/fonts/HelveticaNeue.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

● It is recommended to use all of the listed formats above for maximum compatibility.
Otherwise, simply using woff2 and woff will support most modern browsers.
● You must have a font file for each listed format. Use​ ​Transfonter​ or​ ​FontSquirrel’s Web
Font Generator​ to generate all file formats from a single one.
● Compress your fonts when possible.​ ​See here​ for more information.
● Combine multiple type-families (light, regular, semibold, bold, etc) into one font-family,
instead of having a different font-family name for each type-family.

Alternatively, you can also import fonts using an online web font service, such as​ ​Google Fonts
or​ ​Typekit​.

Further Readings:

● Further Hardening Of The Bulletproof Syntax

● FontSquirrel: How To Use The Generator

Font Loading
Before custom fonts are displayed, they need to be loaded first. There are three possible
scenarios for font loading:

1. The font family is not recognised and a fallback font is applied.

2. The font family is recognised but not yet loaded, and will be applied when it has finished
downloading.
3. The font family is recognised and has already been loaded and will be applied
immediately.

Scenario 1 only happens when you try to use a nonexisting font, or a declaration with a bad src.
This can and should be avoided entirely. Jumping to Scenario 3, it is the best case scenario and
can usually be achieved through proper font caching. Scenario 2 is the scenario that involves
font loading. Font loading is mostly unavoidable (at least for the first request instance). There
are several ways to deal with it:
1.​ Flash of Unstyled Text (FOUT). A FOUT is an instance where a web page uses default and
fallback fonts before switching to the proper web font. It happens because font requests do not
happen until both HTML and CSS are downloaded. This means that there is a period of time
where HTML is displayed before fonts are fully downloaded. ​The FOUT is the optimal
approach for most websites​, mainly because the alternatives are a lot worse. When done
correctly, a FOUT is hardly noticeable.
2.​ Flash of Invisible Text​ (FOIT). A number of years ago, some modern browsers started to
implement a new technique of dealing with font loading — the FOIT. A FOIT is an instance
when the browser detects that a font is currently loading, and hides the text until font loading is
complete. There is usually a maximum wait time before the browser switches to a fallback. ​This
approach should always be avoided.​ Although it might sound good in theory, it can provide
an awful user experience for people with slower internet. It can cause a FOUT after the initial
FOIT, and at worst can even lead to permanent invisible content.
3.​ The Whitescreen Approach.​ The entire web page does not display until fonts are loaded.
Alternatively, a loading progress bar can be displayed. ​This approach is ONLY recommended
if a FOUT is going to heavily detract from the user experience of your audience.​ This is
usually the case if the web page heavily relies on very distinct fonts in large sizes. Otherwise, a
FOUT is preferred because content is king. This approach is similar to FOIT, but superior
because you control when to start showing content instead of the browser. In FOIT, invisible text
might also confuse the audience, whereas a completely white screen (or a progress bar) is an
obvious sign of loading.
Whether you plan on going with the FOUT approach or the Whitescreen approach, you will want
to use a JavaScript library called​ ​Web Font Loader​. Web Font Loader gives you added control
over @font-face, and adds events for you can control the font loading experience.
Note: There is a W3C Font Loading API that achieves similar goals, but its​ ​support is still poor.

FOUT Approach
Here is an example of using Web Font Loader with the FOUT approach:
<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Lora:400,700,400italic,700italic:latin' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
</script>
<noscript>
<link href='http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic'
rel='stylesheet' type='text/css'>
</noscript>

<style>
p{
/* use fallback fonts */
}

.wf-active p {
/* styles for custom fonts */
}
</style>

● It is important to use Web Font Loader asynchronously so it does not delay the render of
the rest of the page
● Style your fallback fonts to appear as close as possible to your actual fonts to minimize
the effects of the FOUT. See​ ​here​ for a list of usable fallback fonts. Use​ ​this tool​ to easily
compare your fallback font to your custom font.

Whitescreen Approach
Here is an example of using Web Font Loader with the whitescreen approach:
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js"></script>
<script>
WebFont.load({
google: {
families: ['Raleway', 'Oswald']
}
});
</script>

<noscript>
<link href='https://fonts.googleapis.com/css?family=Raleway|Oswald' rel='stylesheet'
type='text/css'>
</noscript>

<style>
.wf-loading {
display: none;
}
 .wf-active p {
/* styles for custom fonts */
}

p{
/* use fallback fonts */
}
</style>

● In this case, the fallback does not need to appear similar to your custom font since there
is no FOUT. Style the fallback as you see fit.
● Use​ ​Pace​ if you want to include a progress bar instead of a white screen. This is
significantly better for UX, especially if the font files are large.

Further Readings:

● Type Study: Choosing Fallback Fonts

● FOUT, FOIT, FOFT
● Web Font Optimization

OpenType Features
OpenType features can be thought of as typographic options for the font. They can be used to
enhance the legibility and appearance of text.
p{
font-kerning: normal;
font-variant-ligatures: common-ligatures contextual;
font-feature-settings: "kern", "liga", "clig", "calt";
}

1. OpenType features are built in the font. This means that different features will be
available to different fonts. Check which features are availabe to the fonts that you are
using.
2. Use font-feature-settings to enable OpenType features.
3. Kerning kern, ligatures liga, contextual ligatures clig, and contextual alternatives calt
should always be enabled for all texts.

Further Readings:

● Caring About OpenType Features

● Death To Typewriters
● Web Font Optimization
Web Style Guide
Relative Units
Use relative units whenever possible.
html { font-size: 100% }
p { font-size: 1em }

@media (min-width: 64em) {

html {
font-size: 112.5%;
}
}

● font-size: 100% listens to the browser’s font size settings instead of overwriting it. By
default in most browsers, this would place 1em at 16px.
● Changing the value of the font-size of the html will also affect every em and rem
element. This can be useful for implementing responsive web design.
● User preference is important, so do not stray too far from font-size: 100% and 1em.
● Use rem and em for font-size.
● Use rem, em, or % for element positioning (margin, padding, etc).
● Use em for media query dimensions.
● For large headings or when text is grouped with an image, use​ ​FitText​ to achieve
scalable headlines. Stray away from vw and vh due to incomplete support, difficulty in
precise configuration, and that it does not listen to browser font or zoom settings.

Further Readings:

● Type Study: Sizing The Legible Letter

● 5 Useful CSS Tricks for Responsive Design
● REM vs EM - The Great Debate
● PX, EM or REM Media Queries?

Containers
The container, also known as the ​wrapper​, is an HTML element that encloses one or more other
elements. It allows for grouping elements semantically, cosmetically, or in layout.
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}

.container {
max-width: 67rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
}

● It is strongly recommended to use box-sizing: border-box.​ ​Click here​ for more

information about it.
● Using max-width with left and right padding is an easy way to create a mobile-friendly
container.
● Choose a suitable width that isn't too long (​causes visitor's eye to have a hard time
focusing)​ or short (​causes visitor's eye to travel back too often)​ . In web typography, there
is no line length rule that works for every font, size, leading, and resolution. Use your
own best judgment.

Further Readings:

● * { Box-sizing: Border-box } FTW

● StackOverflow: Ideal Column Width For Paragraphs Online

Font Sizing
Use a​ ​modular scale​ to help you decide on the font-size of your elements. ​Modular scale​ refers
to a series of harmonious numbers that relate to one another in a meaningful way.
A modular scale in action.​ ​Image source

● The modular scale is only a ​guideline​ and can be thought of as just a starting point.
● Keep in mind that different fonts have different cap heights and x-heights, and that most
modular scale tools do not account for that.
● In your stylesheets, provide a reference back to what modular scale you used in
comments.

Responsive Modular Scale

A single modular scale will rarely look good on all resolutions. To remedy this, different scales
can be used depending on the resolution of the viewer's device.
//Sass responsive modular scale

/*
* Modular scale
* http://www.modularscale.com/?1.25&em&1.33&web&text
*/
$type-scale-large: (
h1: 3.911rem,
h2: 2.941rem,
h3: 2.211rem,
h4: 1.663rem,
p: 1.25rem
);

/*
* Modular scale
* http://www.modularscale.com/?1.25&em&1.25&web&text
*/

$type-scale-medium: (
h1: 3.052rem,
h2: 2.441rem,
h3: 1.953em,
h4: 1.563rem,
p: 1.25rem,
);

/*
* Modular scale
* http://www.modularscale.com/?1.1&em&1.25&web&text
*/

$type-scale-small: (
h1: 2.686rem,
h2: 2.148rem,
h3: 1.719rem,
h4: 1.375rem,
p: 1.1rem
);

$breakpoint-medium: 75em;
$breakpoint-small: 45em;

@mixin size($level) {
font-size: map-get($type-scale-large, $level);
@media (max-width: $breakpoint-medium) {
font-size: map-get($type-scale-medium, $level);
 }
@media (max-width: $breakpoint-small) {
font-size: map-get($type-scale-small, $level);
}
}

// Example

.title {
@include size(h1);
}

Further Readings:

● More Meaningful Typography

● The Typographic Scale

Vertical Spacing
Vertical spacing is created by line-height, margin, and padding.

● line-height should be unitless. Wide containers should have text with a larger line-height,
while narrow containers look better with text with a smaller line-height.
● Try to only apply margins in a single direction on textual elements, preferably
margin-bottom.
● Adhere to the​ ​Law of Proximity​.

Vertical Rhythm
Vertical rhythm is the concept of keeping vertical spaces between elements consistent. It is
incredibly important as it helps to create a visually relaxing experience, and evokes a feeling of
familiarity to users.
Image source
Establishing a vertical rhythm is simple. First, decide on a base whitespace value that you will
use for vertical margins and vertical padding. Then, apply this value as a single-direction margin
(or padding) to your containers, textual elements, and other relevant elements. For larger gaps,
use a multiple of the base value.
Setting the base vertical spacing to be the same size as the line-height will allow every line to fit
in an imaginary baseline grid. This is often done to imitate the uniformity of print design. This is
not a requirement of vertical rhythm; any value works for base vertical spacing as long as a
multiple of it is repeated consistently.
body {
line-height: 1.4; // Base line height
}

p{
font-size: 1.25em; // Base font size
margin-bottom: 1.75rem; // Base vertical spacing: (1.4 * 1.25) = 1.75
}

h1 {
 font-size: 3em;
margin-bottom: 3.5rem; // Double the base value for a larger gap (1.75 * 2) = 3.5
}

h2 {
font-size: 2em;
margin-bottom: 1.75rem;
}

h3 {
font-size: 1.5em;
margin-bottom: 1.75rem;
}

.page-container {
padding: 3.5rem 2rem; // 3.5 is double the base value
}
/* Simple Sass Implementation */

$base-line-height: 1.4;
$base-font-size: 1.25rem;
$vertical-rhythm: $base-line-height * $base-font-size;

body {
line-height: $base-line-height;
}

p{
font-size: $base-font-size;
margin-bottom: $vertical-rhythm;
}

h1 {
font-size: 3em;
margin-bottom: $vertical-rhythm * 2;
}

h2 {
font-size: 2em;
margin-bottom: $vertical-rhythm;
}

h3 {
 font-size: 1.5em;
margin-bottom: $vertical-rhythm;
}

.page-container {
padding: ($vertical-rhythm * 2) 2rem;
}
Note that rem is used for spacing as it is not influenced by the font-size of the element.

Bottom Aligned Baseline Grid

The bottom aligned baseline grid is a stricter implementation of vertical rhythm. In web, text is
vertically aligned to the center of the line-height. This can be troublesome for large text as there
will be excessive space on the top and the bottom. In print, this issue is avoided as text is
aligned to the bottom of the baseline grid.
It's also possible to fix the issue without a baseline grid by applying a negative margin-top and a
smaller margin-bottom to large texts.
Image source
There is no easy way to apply a bottom aligned baseline grid that works for different typefaces,
font-size, and resolutions. It is highly recommended to use a typographic baseline library such
as​ ​Sassline​ or​ ​MegaType​.
Remember that vertical rhythm is just a guideline, and that the baseline grid is imaginary. It
does not need to be pixel perfect for every element, nor does it need to be followed at every
instance.

Further Readings:

● Why is Vertical Rhythm an Important Typography Practice?

● Aligning type to baseline the right way using SASS
● Is Web Typography Completely Broken?
● Single-direction Margin Declarations
● Web Typography is broken: here's how we can fix it

Color
Color provides a huge visual distinction and is an important part of typography.

● Don't pick colors arbitrarily; use a color palette instead.​ ​Material Design colors​ and​ ​Flat
UI colors​ are good palettes to start with.
● Do not overuse a color too many times, or else they may lose their unique distinction. Do
not use too many completely different colors either.
● Adhere to the​ ​Law of Similarity​.
● It is recommended to not use pitch black #000 as your body text color. Instead, use a
very dark gray such as #333.
● Sometimes, it is better to use an alpha value or opacity instead of a lighter color.​ ​Click
here​ for an in-depth explanation.
● Make sure that there is enough contrast between the text and the background. Use​ ​this
contrast checker tool​ to help you.

Further Readings:

● Magic Of CSS: Color

● Google Style - Color

Underlining
In a printed document, don’t underline. Ever. It’s ugly and it makes text harder to read.​ ​Practical
Typography
By default, underlines don't look great in the web either. Fortunately, there is a method involving
background-image to style underlines to make them look appealing. Here is a Sass
implementation of the original underline gist by​ ​Adam Schwartz​:
@mixin text-underline-crop($background) {
 text-shadow: .03em 0 $background,
-.03em 0 $background,
0 .03em $background,
0 -.03em $background,
.06em 0 $background,
-.06em 0 $background,
.09em 0 $background,
-.09em 0 $background,
.12em 0 $background,
-.12em 0 $background,
.15em 0 $background,
-.15em 0 $background;
}

@mixin text-background($color-bg, $color-text) {

background-image: linear-gradient($color-text, $color-text);
background-size: 1px 1px;
background-repeat: repeat-x;
background-position: 0% 95%;
}

@mixin text-selection($selection) {
&::selection {
@include text-underline-crop($selection);
background: $selection;
}

&::-moz-selection {
@include text-underline-crop($selection);
background: $selection;
}
}

@mixin link-underline($background, $text, $selection){

@include text-underline-crop($background);
@include text-background($background, $text);
@include text-selection($selection);

color: $text;
text-decoration: none;

*,
*:after,
 &:after,
*:before,
&:before {
text-shadow: none;
}

&:visited {
color: $text;
}
}

/* Example usage */
a{
@include link-underline(#fff, #333, #0BF);
}

SmartUnderline​ is a library that simplifies the process

It is highly recommended to reserve underlines only for hyperlinks. This is a trend that the
majority of websites follow, and deviating from it may cause confusion.

Further Readings:

● Crafting Link Underlines On Medium

● Smarter Link Underlines For Every Website

Conclusion
Congratulations for making it to the end of this handbook. Typography on the web — a medium
where the user can be on any device in any resolution — is extremely difficult. When I first
started designing websites years ago, I found it near impossible to find up-to-date information
on best web typographic practices. There were many blog posts by experts with contradicting
information, and existing books on the subject of web typography rarely go into details on
technical implementation. ​Typography Handbook​ aims to solve this problem and provide almost
everything that a beginner would need to know to create industry-standard typographic
elements. I hope that this goal succeeded with you.