What is the typography?
From font type & size to texture and spacing, typography is the style, design and appearance of text.
Born from the ancient days of ~handwriting~ (OoOooohh), typography exists wherever there are words and touches almost every aspect of business – from visual design to brand messaging, style guides and marketing strategies.
So it should be pretty clear that typography is a critical part of our work as designers. This is why we need to stay modern in how we do typography and use it for our clients (and our own businesses).
To the history of typography
Although the history of typography goes back WAAAYYY – imagine hieroglyphs and kanji – when we talk about it, we're specifically referring to its use in design, starting with (drum roll please) –
Expressive typography
Between the Futurist and Dada movements, expressive typography began to appear in design. In part, it was a way to more fully embody the various feelings and movements in the work and express the idea.
The articulation frequently made the immediate "message" unrecognizable, however that was the point! This was viewed as a progressive perspective ~at the time~ and we still think it's pretty funny.
While we could totally go with the history of expressive typography, we'll let Filippo Tommaso Marinetti close this section –
"I undertake a typographical revolution directed especially against the idiotic and disgusting conception of old-fashioned books of verse. . . . Even better: my revolution is directed against what is called the typographical harmony of the page. . . I intend to double the expressive power of words."
Functional typography
Expressive typography is hard to follow, but functional typography has settled in and started to send more specific, literal messages. Wait a minute! How is this different from how we used the font outside of the design?
Great question! Let's do a little reconstruction.
Type said, “Look at me! I can press these letters into pages and tell you things!'
Expressive Typography asked, "What if we used these letters to create art?"
And finally Functional Typography asked right back: "Porque no los dos?"
(Offer winning music and lots of really beautiful, functional type)
Why is typography important?
It's absolutely wild to us that typography is once in a while ignored or pushed to the rear of the stage for more ~glamorous~ design elements like logos.
And hey, we understand.
In numerous unique situations, viable typography is basically imperceptible on the grounds that it ought to be clear to the point that the peruser won't actually see it. However, it is, fairly subtly, an awe-inspiring phenomenon and a key plan component with serious effect.
It does a ton of the difficult work of building brand mindfulness and making associations between those brands and their current and possible purchasers.
Like all other individual design elements, typography communicates a message beyond words. As Ted "Theodore" Logan once said, "Hey."
Give design a voice
Good typography has the power to create visual progressive system, set the general vibe of an item, administration, site or brand, and promote graphic balance. Pretty important stuff if you ask us! "Backup Dancer" who? The typography is the star of the show, baybee!
And no kidding, all he does is magic.
From the sharpness or nuance of typefaces to the variety range, letter size, and separating, in a real sense each choice you make about taking care of existing kind — or the plan of your unique sort — can emphatically or adversely influence the vibe, air, or voice. plan.
For example, fonts with bizarre or unconventional edges can change the tone of a message to be fun and quirky, while other fonts can feel more classic or whimsical.
You can look at a compressed sans serif or on the other hand a basic customary textual style for a more serious or proficient tone.
At the point when you truly know a great deal, you can begin blending and matching these textual styles and pick your own experience to make the specific tone you believe the peruser should get the message in.
Fortunately, "really knowing your stuff" can be much sooner than you thought possible! We've got a course right here - jump into our online typography course and get started now.
Oh, and remember, y'all, the choice of typefaces is just ONE of the many elements you can tweak to change your entire design.
You can also align things in many different ways using the grid and play around with contrast, weights, and line breaks. You can play with variety and separating, situation and haziness. These can all convey various characters and tones.
A clear, effective and memorable message
Have you ever seen a piece of art that made you cry? Or how about item bundling that made you shout, "OMG!" and afterward go show it to another person?
The capacity to obviously convey a message, feeling or activity isn't only held for realistic or visual plan. Your typography can do this as well, which is why it's super important to include it as an intentional part of your design.
Personally, we're still thinking about the FedEx logo's typographical choices. Sure, it's been praised in marketing programs for years, but it's worth pointing out here.
From the unobtrusive optical deception of the picture of a bolt between the "E" & "X" (representing action, movement and direction) to the choice of colors (differentiating their services to evoke feelings of quality and trust), to the choice of spacing and font (creating a sense of service, speed , accuracy and reliability). Once you see it all come together, it's like magic.
If you let your type roam loose and free, it will still convey a message, feeling, or action, but you won't be able to control it. So be deliberate and careful! Because you should know what they say, "With great typography comes great responsibility."
We're almost certain they say that at any rate, and on the off chance that they don't as of now, they certainly ought to!
Influence
We're all there staring at four different salad dressings, all similarly priced, similar ingredients, but we hesitate. Which should I choose? Does it even matter? Finally, we will choose one. But why that one?
Numerous seemingly insignificant details impact our navigation, and (who could have imagined!) a significant number of these things are a direct result of our typography choices. You might skip the one with blue lettering because Ranch looks green to you (right? Just us?).
You may gravitate toward the softer letters of a sans serif font over a serif typeface. We often grab one that has a unmistakable plan - I realize this is the one I need since it seems to be the brand I partner with Farm Dressing.
In this model, we perceive how all around planned typography creates authority, builds trust between the brand and its user, and captures and maintains the user's attention, all while communicating the brand's personality and essence. That is a ton of work for one plan component!
Accessibility
Striving to provide a positive user experience through amazing typography skills isn't just about what looks the best or the more interesting.
As per the World Wellbeing Association, 1 of every 7 individuals (or 15% of the total populace) battle with fundamental communications and undertakings.
Every element of typography affects readability and accessibility. So, in order to do our job responsibly, we need to consider people with age-related conditions, poor vision, learning disabilities, dyslexia, aphasia or illiteracy.
When you understand how typography can help or block the client experience, you should rest assured
that your type is doing all the important things, like helping the reader find the beginning of each line or telling them exactly what to pay attention to and when.
Keep it legal! Making typography accessible is the right and fun thing to do, but it's also the law. Be sure to check for ADA consistence and the most recent web availability principles and regulations to keep awake to date.
Various sorts of typography
The various sorts (play on words expected and 100 percent fundamental) of typography can cover in many places and in many ways, but we can generally divide them into these four categories:
Printing
No, print isn't dead yet, and when we're working 100 percent digitally on something that will eventually be physical, there are a lot of things to consider. Interestingly, print typography requires many of the same things as web typography:
Testing
Testing
And finally TESTING!
When we print for a reason, we have "proofs". Please use this test run to make sure everything comes out as you envisioned before you order 3,000 copies. It will save you and your client headaches and money!
Look for readability issues; does the type change when you print, is it bigger than you expected, or is it not big enough? Stylistically, does it have the impact you were hoping for, or does it look less va-va-voom now that it's printed?
Adjust accordingly and note the illustrations learned for future reference. By the day's end, we're continuously learning, correct? Right!
Digital
Similarly, we want to test and make sure our site typography is responsive. This time, it's not about how it looks in the final iteration, but rather how it looks on different devices, platforms, and browsers (ie automatically adapting to different screen sizes).
So the thing would you say you are searching for while testing responsive sort? Versatility, dividing, contrast, and so on. You maintain that it should look great on without question, any telephone.
There are several places where you can easily test your display browser and different devices. Sites like BrowserStack offer free and paid testing administrations to guarantee your typography is working appropriately. Which carries us to…
Functionality
Here we see a portion of the covers we referenced before. "Useful" is both a sort (ha!) of typography and something your typography ought to be.
Regardless of whether you're in the domain of "expressive typography" and not "practical," it's as yet critical to make the sort work the manner in which you need and need it to.
For less expressive applications of your type, the user must be able to read the text, which requires a legible font. As beautiful as some of the more complex decorative fonts are, your design shouldn't be difficult to see or understand.
Expressive
Hooray for another overlap!
We went over the history of expressive typography a bit earlier, yet, what really makes it expressive versus practical? Clearly it's not quite so natural as "in the event that I can't understand it, it's expressive!" Alright, so what's going on here?
The real answer is almost as quick and easy as the stupid one! It is typography that uses type unexpectedly and emotionally, often using letters and other components as shapes that make up an image.
Again, this was revolutionary stuff in its day, and we're still amazed when it's done well. Like this:
Kinetic
This is a cool sounding name for a pretty cool looking thing. Kinetic in this context just means "moving text". We think it's so clever because it merges design and text into the fascinating world of animation. Gotta love that cinematic charm!
You can check out our favorite example of kinetic typography while learning some extremely useful quick tips for ruling type – multi-taskers rejoice!
Piet Zwart
Born in 1885, Zwart was a self-proclaimed "typotext", graphic designer, architect and downright OG of typography. He was a known rule breaker, mixing and matching new or interesting themes with traditional design elements.
Herb Lubalin
Known for his use of letters within an image or icon, Lubalin called his designs "typography". His designs straddled the line between playful, fun and simple, functional.
Paula Scher
The first woman president of mega design firm Pentagram, Paula Scher's unique designs integrated typography into imagery. Imagine a digital representation of hatching.
Gail Anderson
Gail Anderson, the first African-American woman to receive a National Design Award for Lifetime Achievement, has worked with just about every type you can imagine. She also wrote books and taught typography courses.
Annie Atkins
Although Annie Atkins isn't exactly a design legend (yet!), she's someone we've got our eye on, and you should too. Her unique, nostalgic take on typography can be seen in Wes Anderson's The Grand Budapest Hotel.
The difference between interleaving and kerning
Spacing refers to spaces between lines of text. Pair alignment is the space between letters. Editing any of these can dramatically affect the legibility and legibility of your text, so please space responsibly!
Considering the font available
Accessible font means that it is easily read by most people and assistive technology (needed by people with vision loss, blindness or reading disabilities) and will not slow down or exclude any visitor.
What every beginner should know
Before considering the aesthetics of your font design, consider the primary goals of your typography.
At a basic level, your type should always strive to be:
1. Clear and uncluttered
2. Interesting and not boring
3. Communicating an idea
4. Detailed, detailed, detailed
Other things to remember:
1. Keep it simple
2. Contrast is king
3. When in doubt, skip the scale
4. Use cases
5. Play around with point size and line breaks
6. And above all, to make it readable
What you should never do
While we enthusiastically encourage you to experiment and break the rules when it makes sense, here are some typographic no-nos that are just plain criminal:
1. Using wrong fonts or wrong pairing
2. Using too many font styles or typefaces
3. Improper Use of Tracking
4. Stretching or distortion of text
5. Leaving "Orphans" and "Widows"
6. Using too many signals or being bored
7. Text jamming
Need clarification on some or all of them? Read our Crimes of Typography article here.
What does good typography look like?
You look at it baby!
Okay, but seriously, here are some simple tips and tricks that will up your typography game immensely in about the same amount of time it takes to toast a baguette.
1. Align left
2. Use one font
3. Skip the scale
4. Double the point size
5. Align to one axis
6. Choose any font (type!)
7. Group using rules
8. Avoid corners
9. Beware of the gap
10. Relax, it's just a type
POP (goes for a bagel)! See? Look at yourself, multitasking like a boss.
Did that little bite of a bagel make you want to eat a whole breakfast sandwich?
There's bacon, eggs and cheese! Oops, we mean a video, a full blog post, and a free download of our typography manual. Om nom nom.