Get your Ems, Ens, and hyphens in a line
Using special characters in body copy can change a lot of what is being communicated to your audience. Designers and writers also use typographic symbols to communicate in a more skillful and dynamic way. They also elevate your designs to a higher typographic level.
Using the proper dash can sometimes be a question mark for every designer or writer. There are three characters that belong to the dash family; Em and en dash, and the most commonly known, hyphen. Em and en dashes are also typographic units of measurements while hyphens are typically punctuation.
Em dash
Em dash is one of the most versatile forms of punctuation. It can take the place and add a level of complexity to the traditional comma, parenthesis, or colons.
The em dash separates information within a sentence—represents a break in the sentence. This dash can also be used as a pause in thought.
An em dash is the length of the x-height or the width of an uppercase M—if the font size is 12pts, the em dash is 12pt wide.
Em dash examples
- When they discovered what the weather would be like during their trip—raining and thunder—they canceled their trip.
- After months of deliberation, the jurors reached a unanimous verdict—guilty. (found on https://www.thepunctuationguide.com/em-dash.html)
En Dash
An En dash symbolizes a link to show ranges in number and dates. In addition, this dash can form complex compound adjectives as well.
The en dash is a mid-sized dash—in between the size of an em dash and a hyphen.
En dashes are half the width of the em dash and size of an uppercase N—if the font size is 12pts, the en dash is 6pt wide.
En dash examples
- Opus Design’s favorite show, the Office, aired from 2005–2013.
- The Red Sox won 8–4 against the Dodgers.
- My grandmother gave me a World War II–era clock.
Hyphens
Hyphens are the most commonly used form of dash punctuation.
The hyphen is used to join words or parts of words to make a new meaning. These can, in turn, create compound words as well. Therefore it can be confusing when trying to decide whether to use a hyphen or an en dash. In addition, best practice may be to check a dictionary if you are unsure.
The hyphen is the smallest out of the three dashes—half of the width of an en dash. In regards to the point size, if it is 12pt type, the hyphen would be 3pts wide.
Hyphen examples
- Editor-in-chief
- Good-looking
- Life-size
If you are still unsure, send us a note and we’d be happy to chat em dashes, en dashes and hyphens!
We are so excited to announce that on October 18th, 2019 we officially earned our B Corp™️ Certification. We are deeply honored by the recognition and thrilled about joining this incredible and important community. 
Hex codes are a hexadecimal format for identifying colors. This is a system used in HTML, CSS and SVG. Each hex code refers to a very specific color, which allows for two designers or a designer and developer to be on the same page about what exact light blue (or any other color) they are referring to. They are always a six-digit code, which contains three pieces of information:
Each of these primary colors is measured on a scale of 0-255. First, identify how much of each is present in the hue and write the values down. For this example, I am going to use the Opus Red.
Similar to how the binary system is based on 2, the hexadecimal system is based on the number 16. There might be a smarter and faster way to divide, but for this system at the good old long division method worked best for me. Starting with Red, divide the three values noted down in the previous step by 16.
In certain cases (like the R-value in this example) the numbers that you arrive at after long division are in the teens and have two digits. Using two digits for a single value breaks the system of #RRGGBB. This is where alphabets come in. The letters A, B, C, D, E, and F replace the values 10, 11, 12, 13, 14, and 15 respectively.
So here you have it: the hex code for the Opus Red is #FC3C43.
This was by no means an official tasting, but we had a ton of fun and the sugar rush carried us through the rest of the afternoon. For several weeks after, our studio was in a Nutella frenzy. Julia, our co-founder, brought some samples of Nutella from Germany for us to taste the differences in formulas and Lily, our other co-founder, baked an incredible cake with a Nutella cream for us all to enjoy. And, our amazing client had an official Nutella spoon engraved for us.
These typefaces date back to the late 1600s to the mid 1700s. These faces have a very closer relationship to a calligraphers’ nib. The earlier Venetian Old Styles follow the calligraphic mannerisms of that period and can be identified by the slopping ‘e’ crossbar.
Transitional typefaces date back to the mid 1700s. They are a sort of in between Old Style and Modern faces and contain characteristics of both. Jacques Jaugeon (1690-1710) is said to have created the first Transitional typeface called Romain du Roi or King’s Roman. This typeface was the basis for the very familiar Times New Roman.
Modern typefaces were a departure from the classical typefaces and have very harsh differences in thick and thin strokes. Firmin Didot (1764-1836), a French printer followed by Giambattista Bodoni, an Italian typographer are credited with establishing this style. These are typically clean and elegant typefaces that aren’t generally suited for large body text (due to their high contrast and vertical nature).
Glyphic typefaces are those that try to mimic typefaces that have been chiseled or engraved into a surface instead of those that have been drawn by pen.
This includes most of the earlier sans serif from the 19th century to the early 20th century. They very often feel like serif typefaces with the serifs just chopped off. These typefaces were revolutionary for their time and were thought to be grotesque looking. Since they are a starting point for san serifs, they often have a few peculiar quirks such as uneven stroke thickness, spurred ‘G’s and curved ‘R’s.
These typeface were designed to be simple and very straightforward. They are meant to function as anonymous and almost universal typefaces. They first came around with the development of the Intenational Typographic Style or the Swiss style. Many of these faces are based off the earlier grotesques but attempt to clean out the quirks to create very neutral typefaces.
As the name suggests, Humanist sans serif have a more friendly human feel to them and their varying stroke weight is meant to be reminiscent of the handmade calligraphic letter. These typefaces tend to pair well with Old Style serifs due to their shared base qualities. Edward Johnston (1872-1944) was a British craftsman who developed the typeface Johnston which was one of the first Humanist typefaces in 1916.
Geometric sans serifs attempt to further simplify letterforms by basing them entirely on geometric shapes like circles, squares, and triangles. Their structure makes it a bit difficult to read when set in large body text and letters like the circular ‘o’ and single story ‘a’ have a tendency to get confused with each other at a small size. Herbert Bayer, Jakob Erbar, and Paul Renner were the pioneers of this style. Fun fact – Paul Renner’s Futura is the typeface used for the plaque placed on the moon by Aldrin and Armstrong.
This model is based on the mixing of light. The three primary colors of this system are Red, Green, and Blue (RGB). When we see color created by any light source – like a TV, or computer monitor, or a projector – the three colors mix together at different levels to create every other color. When Red, Green, and Blue are all mixed together you get pure white. When designing for web or mobile, since the final outcome will be a screen, we work in this RGB mode.
This model is based on the mixing of pigment. From finger painting to magazine prints, any color that is on a physical surface follows this color system. Traditionally, particularly when thinking in terms of painting, the primary colors are Red, Yellow, and Blue. Most painter’s color wheels would follow that system. However, with the advances in printing technology the Cyan, Magenta, Yellow, and Black (CMYK) system provided more options for printers. To avoid any confusion Black is referred to by the letter ‘K’ so as not to be mixed up with Blue. When designing for anything that will be printed (magazine, posters, banner etc.), it is important to set up your workspace in CMYK.
Sir Isaac Newton created the first color wheel based on spectral hues and the mixture of lights. Today, we mostly study the color wheel from the subtractive method. It is an arrangement of hues in a chromatic manner that makes it possible for us to understand the relationships between colors.
The three primary colors are Red, Yellow, and Blue. They cannot be formed by the mixing of any other colors and by mixing them you get all other colors.
These are the colors that are produced by mixing neighboring primary colors.
By continuing the mixing process, but now including the secondary colors, we arrive at the tertiary colors.
This is a set of two colors that lie directly opposite each other on the color wheel. These colors produce a very high contrast effect. For example, the complimentary color to Orange is Blue.
This is a set of colors that lie right next to each together on the color wheel. These colors create a smoother and calmer combination. Typically, one color out of this scheme dominates and the other colors support or accent it. Orange-Red and Orange-Yellow create an analogous scheme with Orange.
I like to think of this as a combination of the complimentary and analogous Schemes. This color scheme has a similar high-impact as the complementary color scheme but is a little more harmonious like the analogous scheme. A split compliment is formed by one color and the two colors on either side of its compliment. In the case of Orange, its compliment is Blue and the two colors on either side of Blue are Blue-Purple and Blue-Green. In this way, Orange, Blue-Purple and Blue-Green form a split compliment.
These colors lie evenly spaced out and can be located by creating an equilateral triangle through the color wheel. This scheme tends to be vibrant and dynamic and it is usually a good idea again to use one as a dominant color and the other two as supporting colors. Orange, Green, and Purple form a triadic color scheme.
Another way to get more variations of a single color is to add black, grey, or white to any color on the color wheel. Each color on the color wheel is a specific hue. When the hues are modified in this manner, they become desaturated and they lose some dominance or intensity of that specific hue.
