Spacing

• Many typographic decisions are based on spacing. 

• This is something that has always been true with printed type, and became applicable to web type with the advent of CSS.

• Regardless of whether we're talking about using type for print or for the web, there are two directions in which we can control spacing i.e., horizontally, and vertically.

Horizontal Spacing:

• Kerning and tracking are two terms used in horizontal spacing.

• Kerning is the adjustment of space between pairs of letters. Some pairs of letters create awkward spaces. Kerning adds or subtracts space between letters to create visually appealing and readable text.

• Tracking differs from kerning in that tracking is the adjustment of space for groups of letters and entire blocks of text. Use tracking to change the overall appearance and readability of the text, making it more open and airy or more dense.

Tracking vs Kerning

Vertical Spacing:

• In print design language, the vertical space between lines of text known as leading.

• When there were no added spaces, the lines were said to be "solid." Text with added vertical space is much easier to read.

• As you can see in the first paragraph in below figure the default spacing between lines of text is very small.

• In the second paragraph, we have adjusted the CSS line-height property "line-height: 1.5em"..

• An em is a CSS unit that measures the size of a font, from the top of a font's cap height to the bottom of its lowest descender.

Line-height: 1.5em

Examples:

Bad Letter Spacing vs Good Letter Spacing

Letter spacing on Names

Used for Textbook  Title Names

Advantages:

• Spacing can be applied to text to create special text effects for headlines, subheads, newsletter nameplates, and logos.

• It creates focus to your feature.

Less is more

• The notion that simplicity and clarity lead to good design.

• Simplicity is better than elaborate embellishment.

• Sometimes something simple is better than something advanced or complicated.

• You can see the video easy to understand and read the text you can understand it will take more time.

• That is the concept of less is more you can get more knowledge in less time seeing the videos and images.

Examples:

• The Apple iPhone. The Apple logo was very simple and it offers less features than Android phones but the very few implemented more effectively(e.g.,intuitive user-friendly interface) or more efficiently (in terms of speed, battery usage, response time).

• Customers can only use landline phones in a single location where there is a wired connection to the telephone network. Cell phones are operational anywhere the user get a signal from a wireless network. Although the size of landline is large the mobile supports more features.

• First, when drinking through a straw, people usually drink faster than if they were drinking regularly.This is because while drinking through a straw, a vacuum is created not liquid and oxygen like when taking a normal sip.This means more liquid in each sip and fewer sips until the bottle's empty...

Numbers totaled

• When ever calculate the total, the values based on the decimal positions. In this case we align decimal exact decimal positions.

• We need to align  the numbers by decimal point in a column to make the numbers more neatly and for easily understanding the values.

Examples:

Bill Total

Arrangement of Decimal Points

Names to the left

Why Names to the Left:

• We start off learning left to right reading from top down.

• It's a good practice to produce and design content based on the cultural and standard norms for your target demographic.

Examples:

Names align left in FB Login Page

Names aligned Left vs Right

Names Automatically Aligned to Right in Excel Sheet

Advantages:

• Left-aligned names is always more readable and also easy to identify. Consistency will be follow.

• Higher potential to create rivers of white-space in right alignment.

Numbers always to the right

Why Numbers are always right?

• We usually seen many tables within a site that have a mixture of both numeric values of all types(currency, integers, etc) and columns that contain text.

• Regardless of the mix types of data in one table, the data type in the individual column should drive the alignment.

• Numbers are usually right aligned so that the columns line up based on their relative worth.

• There are two purposes to align numbers to right one is better visualization for accounting and other is to differentiate from text.

Examples:

Used in Bills

Numbers Aligned Right Side vs Left Side

Numbers Aligned Right side in Webpage

Advantages:

• Right align numbers for better readability and comparatability.

• The right-alignment just makes numbers of different lengths look easier on the eye, and is especially helpful for two decimal places commonly used in accounting.

Minimalism

Definition:

•  Minimalism is reducing a design to only the essential elements.

• It is a design philosophy that is used everywhere including architecture, art, literature, music etc.

• It is about focusing on essentials by keeping the elements simple and clean.

• This design principle is widely used in architecture, interior , industrial design, painting, web design etc...

How to achieve Minimalism?

• Only necessary elements for functionality included  in the design.

• Good usage of white space.

• Focus on the pictures.

• Use only single focal point per screen.

• Always color minimally.

Minimalism vs Maximalism

Real Time Examples of Minimalism:

Textbook Contents

Computer (Not a Minimalism Design)

Laptop(Minimalism Design)

CC Camera(Not a Minimalism Design)

CC Camera(Minimalism Design)

Advantages of Minimalism:

• It is designed around the content. Focus and purpose is key when it comes to making minimalism work.

• It works well in responsive environments. There are fewer elements to shrink and stretch and consider in the code.

Power of Hierarchy

Hierarchy:

• Arrangements of items according to their importance.

• They are represented as being above/below/at same level to one another.
  
  
  

Categories of Hierarchies:

Real Time Examples of Hierarchy:

Hierarchy in Document

Disk Hierarchy

Hierarchy in Organisation and  Generations

Hierarchy in Chess Coins

Hierarchy FB Login page

Power of Alignment

Alignment:

• Arrangement of two or more elements in a straight line/ parallely.

• All of the elements to be aligned in some way.

• Alignment can applied to text, numbers, images and design elements.
               

Types of Alignmnent:

1.Align-left:- All lines are aligned to left margin.

2.Align-right:- All lines are aligned to right margin.

3.Align-center:- All lines are centered between left and right margin.

4.Justified:- All lines are expanded to fill out line by adding spaces in between words/elements.

Real Time Examples of Alignment:

Text aligned to left and Numbers aligned to right

Substation Alignment

Alignment in Agriculture

Railway Track Alignment

Power of Padding

Padding:

• Padding used to generate space around the content.

• Padding is used to specify the gap between the content of element and contents of  the element.

Classification of Padding:

1.Padding-top:- Generate space in top portion.

2.Padding-bottom:- Generate space in bottom portion.

3.Padding-left:- Generate space in left portion

4.Padding-right:- Generate space in right portion.
5.Padding:-Generate equal spaces in four directions. 

Real Time Examples of Padding:

Numbers on Keypad of Mobile

Less padding Enough for these shape of keys

Padding of Icons in Mobile 

Breathing Space

Definition:

• It is the space between the columns, lines of type, margins, graphics which provide visual breathing room for the eye.

• More the white space , more is the visual comfort user.

• White spaces are used as a background color of breathing space.

• White background gives the better readability of text.

• The main reason is that dark text(black) on light backgrounds(white) is better for readability compare to the light text(white) on dark background(black).

• White Space acts as separator.

Types of Breathing Space:

•  They are two major types of white space in graphic design.

  1.Active White Space: 

• This is the space that you make a conscious effort to your design for emphasis and structure.

• Active white space is often as asymmetrical, which makes the design look more dynamic and active.

  2.Passive White Space:

•  This is the white space that occurs naturally, such as the area between words on a line or the space surrounding a logo or graphic element.

Active White Space vs Passive White Space

Examples:

White Background Black Text and Black Background White Text

White Background Newspaper

No Breathing vs Good Breathing

Breathing Space between Words