PRINCIPLES OF DESIGN 101

Written By: Zach Champ
Connect with me on Instagram! 

 

TYPOGRAPHY 

WHAT IS TYPOGRAPHY? At its core, typography is the visual representation of language. It involves selecting fonts, determining their size, spacing, and overall layout to create a harmonious and meaningful visual experience. The way words are presented has a profound impact on how they are perceived, making typography a crucial aspect of effective communication. 

Whether in print or digital media, the choices made in typography influence how readers engage with and interpret the content.

Believe it or not, typefaces carry emotional weight. The style of a font can evoke feelings, set the tone, and even convey a sense of personality. 

For instance, a bold and sans-serif font may exude modernity and simplicity, while a serif font might convey a more traditional or classic vibe.

Understanding the emotional nuances of different typefaces allows designers and writers to choose fonts that align with the intended message. 

RULES TO REMEMBER WHEN PICKING A FONT:

1. Reflecting Context Appropriately:

The style of the font or letter-face should harmonize with the context in which it is used. Consider the tone and purpose of the content.

A formal document might benefit from a traditional serif font, while a modern and sleek sans-serif font could be more fitting for contemporary designs. 

2. Understanding the Goal:

Every font serves a purpose, and understanding that purpose is crucial.

Is the goal to grab attention, convey a sense of authority, or enhance readability for extended reading?

The chosen font should align with the overarching goal of the content, contributing to its overall effectiveness. 

3. Prioritizing Legibility:

No matter how visually appealing a font may be, it must be legible. Legibility ensures that the audience can effortlessly read and comprehend the text.

Factors such as font size, spacing, and contrast play a significant role in enhancing legibility.

A font that sacrifices legibility compromises the effectiveness of the message! 

SERIF FONTS

A serif font is a font that has small strokes, or extensions, at the end of its longer strokes. Serifs can be subtle or pronounced. 

Serif fonts are more traditional than sans-serif fonts, but there are exceptions to this rule. Serif fonts are easier to read in printed materials, such as books, newspapers, and magazines, because the serifs guide the reader's eye along the line of text. However, serifs are harder to read on small screens, especially if they have low resolution. 

The origin of serif fonts derives from the art and science of ancient stonemasons.

When carving thick strokes, such as the letter "I," there was a risk of the stone splitting during the carving process. To mitigate this, stonemasons devised a technique: they carved short "stoppers" at the top and bottom of the intended stroke. These stoppers evolved into the serifs we recognize today, serving both a functional and aesthetic purpose.  

Because of their increased legibility, serif fonts are used for extended reading: novels, newspaper articles and most magazines use serif fonts for the main body of the text as they make it easier to read large chunks of text. 

Some popular examples of serif typefaces include:

• Times New Roman
• Garamond
• Georgia
• Baskerville
• Bodoni
• Bookman Old Style

SANS SERIF FONTS

A sans serif font is a font that doesn't have dashes at the end of each letter. The word "serif" comes from old Dutch for "dash" or "line", and "sans" is French for "without". 

Sans serif fonts are often described as modern, friendly, and minimal. They are made up of simple, clean lines that are the same width throughout. 

Some examples of sans serif fonts include: 

SIZE, STYLE, AND ARRANGEMENT

TYPOGRAPHY is a multifaceted element in design and communication that must harmonize aesthetics, accessibility, and utility, especially when considering size, style, and arrangement. 

AESTHETICS

Aesthetics revolve around the visual appeal of typography, encompassing font selection, style, and arrangement to capture the reader's attention and set the tone for the content. 

Some aspects of aesthetics in typography include: 

• Font Selection: Choosing fonts that match the overall design and theme. For instance, a formal document may benefit from a serif font, while a contemporary website might use a clean sans-serif font. 

• Style: The stylistic elements within a font, such as bold, italics, or underlining, can be employed to emphasize key points, create hierarchy, or add decorative elements. 

• Arrangement: How the text is organized on a page or screen affects its visual impact. Proper alignment, spacing, and use of headings and subheadings contribute to aesthetics.

Typography contributes significantly to the visual aesthetics of any written or designed content. The choice of fonts, their style, size, and arrangement all combine to create a visually appealing presentation. 

ACCESSIBILITY 

Accessibility is the essential component that ensures readability for a broad audience, focusing on font size, contrast, line spacing, and font choice to make content inclusive and easily digestible. 

Some accessibility considerations include:

• Font Size: Ensuring that text is large enough for all readers to easily read without straining their eyes. This is particularly important for digital content viewed on different types of devices. 

• Contrast: High contrast between text and background improves readability, especially for individuals with visual impairments. 

• Line Spacing: Adequate line spacing (leading) prevents text from feeling cramped and makes it easier to follow along. 

• Font Choice: Selecting fonts that are legible, with distinct letter-forms and clear distinctions between characters like "l" and "1." 

• Hierarchy: Using fonts, sizes, and styles to create a clear hierarchy of information. Headings and subheadings should stand out and guide readers through the content.

Accessibility is about making content inclusive and easily readable for a broad audience, including those with disabilities or diverse reading preferences.

Typography plays a crucial role in accessibility by ensuring that the content can be understood and navigated comfortably. 

UTILITY

Utility, emphasizes the effectiveness and functionality of typography in conveying the intended message, emphasizing clarity, functionality for the medium, consistency, and the judicious use of emphasis. 

Key utility considerations include:

• Clarity: Typography should communicate the message clearly and concisely, leaving no room for ambiguity. 

• Functionality: Typography should be functional for the medium it's presented in. For example, web typography should consider responsive design, while print typography may focus on page layout. 

• Consistency: Maintaining a consistent typographic style throughout a document or website enhances the overall user experience. 

• Emphasis: Using font styles like bold or italics judiciously to emphasize important information or calls to action.

Utility in typography is about making content effective and functional in conveying the intended message. It ensures that typography serves the primary purpose of communication, whether it's reading a novel, navigating a website, or following instructions in a manual. 

Effective communication is not just about the words we use, but also how we present them. Size, style, and arrangement play a crucial role in conveying information visually.

Finding the right balance among these aspects is the core challenge of typography. Effective typography not only pleases the eye but also ensures that content is accessible to all and serves its purpose efficiently! 

 

BOLD:

Bold text is used in typography for emphasis. It's often used to highlight keywords or important terms. For example, printed dictionaries often use boldface for their keywords. 

Bold text is darker or heavier than other text. It's more commanding than italics or a point size change. Bold is used for heavier emphasis, while italics are used for gentle emphasis. 

Bolding the initial letters of words can improve readability and accessibility. This technique is known as initial letter bolding and is often used in headings, subheadings, or other elements designed to stand out.

In web design, bold typography enhances the user experience. It contributes to an easier experience for visitors to navigate and engage with content. It's especially effective for creating clear and compelling call-to-action buttons that encourage user interaction. 

Bold, italics, and all caps should be used sparingly… If everything is all caps/bold/italic, nothing is emphasized.

Bold text can be used in the following contexts: 

• Headings and Subheadings: Different sections of a document 

• Important Terms: Within a paragraph, key terms stand out. 

• Calls to Action: Vital instructions or prompts are highlighted. 

• Emphasizing Words or Phrases: Within a sentence, specific words gain emphasis. 

• New Words: Signalizing crucial information to the reader. 

ITALICS:

Italics are a type style that is used to create emphasis in text. Italics are almost always slanted and are a direct contrast to the upright style. 

Seven Rules for Italics

1. Emphasis: Use italics to make a word or phrase stand out within a block of text. 
   
   
2. Titles of Work: Italicize (or underline) titles of works for proper distinction. 
   
   
3. Articles: Certain articles or parts of speech benefit from italicization. 
   
   
4. Foreign Words: When incorporating foreign words, italics denote their uniqueness. 
   
   
5. Names of Trains, Ships, Spaceships: Provide a visual distinction for transportation entities. 
   
   
6. Words as Reproduced Sounds: Italics capture the essence of words imitating sounds. 
   
   
7. Words as Words: Highlight words when discussing language itself. 

ITALICIZATION IS USED FOR GENTLE EMPHASIS,
WHILE BOLD IS USED FOR HEAVIER EMPHASIS.

JUSTIFIED TEXT:

Justified text is text that is spaced so that both sides of a paragraph have the same edge. This means that all lines of the text are the same length, resulting in a clean edge on the left and right.

**In Microsoft Word, justifying text extends each line to the left and right margins. This makes the last line of text in a paragraph shorter than the other lines. 

**In Adobe InDesign, you can choose to justify all text in a paragraph excluding the last line, or you can justify text in a paragraph including the last line.

Justified text is common in printed newspapers and some older books, but it's unusual on the internet. 

 One problem with justified text is that it's prone to “rivers”. Rivers occur when word spaces stack one above the other in successive lines of type, creating the appearance of fissures running through the text.

Justified type is often used because it appears crisp and tidy, and it can easily support an overall design because it is so symmetrical in appearance. In addition, it sometimes allows for more copy to fit in a space. Justified type is highly readable and aesthetically pleasing. 

CENTER ALIGNMENT:

Center alignment is used in typography for a variety of reasons, including:

• Titles and headlines: Center alignment is useful for headlines and titles that are one to two lines short. Centering a topic header or headline sets it apart from the rest of the content. 

• Short blocks of text: Center alignment can be useful for short blocks of text like pull quotes. Centered text is easy to read because the lines are short, scannable, and don't require repeated eye movements. 

• Emphasis: Centering can be used to emphasize a point, date, or deadline. 

• Balanced look: Centered text can give your layout a balanced look with its symmetrical format.

However, some say that you shouldn't use more than three lines of center-aligned text at a time because it becomes difficult to read. Others say that if the text block is longer than two to three lines, it will always look better left-aligned. 

LEFT ALIGNMENT:

Left alignment is the most common text alignment and is often the default.

Here are some reasons why it's used in typography:

• Readability: Left-aligned text can be easier to read because of its varying line length, which helps readers track their location. 

• Consistency: Left-aligned text maintains consistent word spacing, which helps avoid line formation and ensures a uniform texture in the type. 

• Avoid unnecessary eye jumps: Left-aligned text helps to avoid unnecessary eye jumps, making the whole copy much easier to follow. 

• Scan and comprehend sentences: Left justification is preferable over justified alignment when we want to scan and comprehend sentences quickly and efficiently.

Left alignment is especially useful for paragraphs, lists, and headings, as it helps maintain consistency and readability. 

RIGHT-HAND ALIGNMENT:

Right alignment, also known as ragged left, is a typography alignment where the text is aligned to the right margin with an uneven left edge. It is primarily useful for comparing numbers, data, statistics, etc. in comparison to left-aligned text. 

Here are some reasons why right alignment can be used in typography:

• Design flow: Right-aligned text improves the flow of design. 

• Guide viewer: Right-aligned text guides the viewer through information. 

• Readability: Right-aligned text can enhance readability. 

• Visual balance: Right-aligned text can create a more visually balanced and interesting design compared to left-aligned text. 

• Numerical data: Right-aligned numbers can create a consistent vertical alignment that makes it easier to read and compare values. 

• Special text: Flush-right alignment can be used to set off special text in English, such as attributions to authors of quotes printed in books and magazines. 

• Table data: Flush right alignment is often used when formatting tables of data. 

Right alignment can also flow more naturally, with better color and texture when set rag right (right).

PRINTING

For printing materials such as flyers, posters, pamphlets, magazines, or incorporating typographic elements into graphic designs for clothing or posters, thoughtful consideration of typographic styles is crucial. 

The choices made can significantly impact the final quality and legibility of the text or font!

Additionally, understanding technical aspects like DPI and ink traps is essential for achieving optimal printing results.

DPI

DPI, or Dots per Inch, refers to the number of ink droplets a printer produces per inch while printing an image. 

The higher the DPI, the more detail is captured in the printed material. 

When printing especially in intricate designs or small text, a higher DPI becomes imperative to ensure the clarity of the characters. 

INK TRAPS

In typography, an ink trap is a sharp recess in an inward corner of a typeface. 

Ink traps are designed to trap ink at intersections of strokes, where ink might pool and bleed.

This can cause text to become emboldened. This is particularly relevant in high-resolution printing where even minor bleeding can lead to a loss of text clarity.

VISUAL DESIGN

The basis of visual design is WHAT WE SEE, and one of the most defining qualities we use to describe the things we see is COLOR.

But what exactly is color and how do we utilize color strategically for visual design?

COLOR THEORY:

The significance of color in human culture dates back thousands of years.

The story of color begins in prehistoric times when our ancestors first experimented with pigments to adorn their world. 

These early pigments were derived from readily available natural sources such as dirt, clay, animal fat, plant extracts, and minerals. Early humans used these pigments to paint their bodies, clothing, and cave walls, creating some of the earliest known examples of art.

The Egyptians associated colors with specific meanings and symbolism. For example, they believed green represented fertility and rebirth, while red symbolized chaos and disorder. 

Egyptian artisans mastered the use of pigments like red ochre and lapis lazuli to create vivid and enduring artworks, including the famous murals in the tombs of pharaohs.

Aristotle contemplated the nature of colors and how they interacted and mixed with one another. He believed that colors could be derived from the combination of light and darkness.

The Age of Enlightenment witnessed significant progress in the scientific understanding of color. 

Sir Isaac Newton's experiments with prisms led to the realization that white light could be separated into a spectrum of colors. This laid the groundwork for the modern understanding of the visible spectrum and the development of the color wheel, which is integral to color theory and design.

TRICHROMATIC COLOR THEORY:

Color, being a frequency of light, possesses electromagnetic properties governed by wavelengths and frequencies. 

The trichromatic color theory, though more applicable in technology and computing, offers valuable insights into the fundamental nature of color.

The trichromatic color theory conveys how color information is represented through three channels or frequencies:

• Primary Color: RED, YELLOW, OR BLUE
• Secondary Color: GREEN, ORANGE, PURPLE
• Tertiary Color: Mixed Colors

COLOR WHEEL:

A color wheel is a visual representation of colors arranged in a circle. The colors are organized by their chromatic relationship to each other. The color wheel helps people understand how colors relate to each other and how they can be combined to create harmonious color schemes. 

It is a simple tool for picking paint colors and deciding which hues go together.

On a color wheel, the primary colors are equidistant from each other, and secondary and tertiary colors sit between them. The colors are usually arranged into one of three categories: primary, secondary, or intermediate

COLOR PALETTES / COLOR SCHEME:

The key to good visual design lies in the deliberate selection and arrangement of colors, using concepts like color palettes or color schemes. These concepts help create a distinctive visual style. 

A common rule of color combination states to use primary, secondary and tertiary colors in 60%, 30% and 10% proportions.

COMPLEMENTARY COLORS:

Complementary colors are color pairings that are opposite each other on the color wheel. They are defined as colors that have maximum contrast with each other. Each complementary pair is made up of one warm color and one cool color.

The three main opposing pairs of complementary colors are:

• Red and Green
• Yellow and Violet
• Blue and Orange

MONOCHROMATIC:

A monochromatic color scheme is based on one color, or hue, with variations of that hue in light and dark shades. 

The color scheme has four components: hue, tone, shade, and tint.

The base color, or hue, is repeated in different tones, shades, and tints. Black and white are always added because they are the darkest and brightest shades of the color. 

RULES OF VISUAL DESIGN: 

VISUAL HIERARCHY: 

Visual hierarchy is the way graphic elements are arranged in a design to show their order of importance.

Designers use visual hierarchy to influence users' perceptions and guide them to desired actions. 

For example, a website can use visual hierarchy to direct readers to look at the most important information first, and then to secondary content. 

Visual hierarchy can be achieved by using principles relating to size, color, contrast, and white space. 

For example, a variety of type sizes can emphasize what's most important, and also organize the overall design of the document. 

CONTRAST: 

Color contrast is the difference between different color hues. 

Colors can contrast in hue, value, and saturation.

• Value: (light vs dark) (black vs white)
• Chroma: (Saturation, Purity, Strength, Intensity, Dullness)
• Hue: (Type of color family: red, yellow, green, cyan, blue, magenta)

The levels of contrast vary from high to low, depending on their position on the color wheel. The primary triad (yellow, red, and blue) has the strongest difference between hues. The contrast between secondary hues is weaker and the contrast between tertiary hues is even more so.

Color contrast is important to consider, especially between text and the background, and between sections depicting meaning such as pie charts, maps, etc.. 

REPETITION: 

In visual design, repetition is the use of the same or similar elements multiple times in a design. These elements can include colors, lines, fonts, sizes, textures, or shapes.

Repetition creates a sense of familiarity for viewers. It can also add texture to a piece and create unity.

For example, you might expect a business's logo to appear on every page of a website in the same place. 

PATTERN: 

In visual design, a pattern is a design that repeats and can be made by repeating shapes, lines, or colors.

Patterns can be regular or irregular, and can be simple like a checkerboard or complex like the branches of a tree. 

Patterns help create visual rhythm in an artwork. They can be regular, repeating, and geometric (like a checkerboard or a sidewalk made of bricks) and sometimes they are more irregular, natural, and organic (like leaves on a tree or shells on a beach). 

In graphic design and printing, a pattern is the repetition of a visual element. For example, a seamless pattern is one where every element within a design combines to form a whole. This is most common in backgrounds on web and app pages. 

RHYTHM: 

In visual design, rhythm is the repetition of visual elements to create a pattern.

It's similar to rhythm in music, and it creates a feeling of organized movement.

Rhythm can be achieved by repeating shapes, colors, or textures. It helps establish a sense of continuity and cohesion in a work. Rhythm can also help unify a work of art. 

Rhythm guides the viewer's eyes from one point to another in a work of art. It gives structure to the experience of looking at an artwork. 

Here are some tips for creating rhythm in design:

• Create visual cues: Consider where you want the viewer to look first, second, and third. Then create visual cues to lead them through the page. 

• Repeat elements: Repeat a color or text size to create a rhythm for the eye to follow. 

• Avoid monotony: Avoid imaging elements with the same weight and even spaces between. 

• Use variety: To keep rhythm exciting and active, variety is essential.

BALANCE:

In visual design, balance is the arrangement of objects in a design based on their weight. Balance is a key design principle that creates a sense of harmony and equilibrium in a composition.

Balance can be achieved by distributing visual elements based on their perceived weight. This can be done using color, texture, and space.

For example, in a design with positive and negative space, the two spaces should have a similar amount of visual weight. 

Balance can be achieved vertically, horizontally, diagonally, or background versus foreground. In three-dimensional design, balance is both visual and physical.

Designers can also use discordant balance, also known as off-balance. This is when none of the elements or images have visual appeal, but they still create a balance.

NEGATIVE SPACE:

In visual design, negative space is the area between or within visual components. It can be any color, texture, pattern, or background image.

Negative space is also known as white space. 

Designers use negative space to:

• Create a balance between design elements
• Provide visual breathing room for content
• Design for the user experience (UX)
• Create silhouettes hidden within type

Negative space can be around the objects placed in a layout, or between and inside them.

For example, in a painting, black elements can turn into negative space as the eye travels downward.

The stark contrast between black and white creates silhouettes hidden within type.

MOVEMENT:

In visual design, movement is the path a viewer's eye takes through a work of art.

Movement is the illusion of motion created by the arrangement of elements, lines, shapes, and colors. 

Movement can add excitement, drama, and overall compositional interest to an artwork. It directs the viewer's gaze, guiding them through the design and helping them absorb information in a structured and coherent manner. 

Here are some ways to create movement in design:

• Use lines, edges, shape, and color
• Use positioning
• Use emphasis
• Use rhythmic movement
• Use sizing and other elements
• Use different techniques

The design principle most closely associated with movement is rhythm.