This tutorial will teach you how to create a really interesting and unique typographic wallpaper in few easy steps. Even a beginner will be able to recreate this effect, and add their own style and thought in it;
This article should be one time stop for everyone that want’s to learn more about typography. Go trough table of contents and see what could interest you. But first the promised tutorial. Let’s get started!
Did you know after we created this tutorial DJ Khaled – Victory CD cover was created using this exact tutorial? There is no other explanation why it is so similar! Super cool!
Table of Contents:
- The Coolest Typography Wallpaper Tutorial
- 45 Great Typography Examples
- 50 Awesome Examples of Minimal Typography
- How to Not Suck at Typography And Become A Professional
- A Handy Guide to Proper Web Typography for a Successful Design
- 15 Super Useful Typography Tools and Frameworks
Are You Ready To Get Started With The Coolest Typography Wallpaper Tutorial Ever?
I am sure you will enjoy and learn a lot from this tutorial! You will learn how to create good looking background, add lightning effects and work with fonts, sizes, colours to make the necessary places stand out!
Good, because we are!
Let’s dig in!
Step 1 – Creating background
First, open a blank document with size 1920×1200 pixels. Fill the background with color #242424. Duplicate the background layer and name it Film grain. Then go to Filter – Artistic – Film Grain. Apply settings shown below.
Set layer opacity to 50%. So far your wallpaper should look like this.
Step 2 – Lightning
Create a new layer and name it Lighting. Then select the Radial Gradient Tool with black and white color.
Draw the gradient as shown below.
Set layer to Overlay and opacity to 55%. You should have something like this.
Step 3 – Adding Brushes
Step 4 – Creating Main Text
Download BEBAS font, create a new layer and type your text. I chose 350 pt size with smooth mode. Color really doesn’t matter. Name layer PEACE.
Step 5 – Add Background Text – Important Step
Lower your text opacity to around 15%. Create a new group (Layer – New – Group) and name it Words. Create new type layers in this group and start typing. Try to use different fonts and sizes. Try to avoid large spaces between words. The fonts I used:
- Times New Roman
- And little bit more default fonts
- Some free fonts from dafont, Colaborate, Extravaganzza
Step 6 – Creating effect
When you’re done duplicate your Words group (Layer – Duplicate Group) and merge it (Ctrl+E). Make invisible your unmerged Words group. Find your large text layer (in my case it’s PEACE), hold CTRL (Command on mac) and click on layers thumbnail. That should load it’s selection.
Then click on your merged words layer and press Ctrl+J. If you make invisible your merged Words layer (and unmerged Words group is still invisible) you should get something like this.
Step 7 – Create Background Text Effect
Make merged Words layer visible again and apply following layer style.
Set layers opacity to 30%.
Then duplicate merged Words layer and place it under merged Words layer. Then go to Filter – Blur – Motion Blur and apply following settings.
Set layer opacity to 15%.
Add text under your title if you want.
Step 8 – Final touches
Locate your PEACE text layer and lower its opacity to 4%.
Create new layer, go to Image – Apply Image, then go to Filter – Render – Lightning Effects and apply following settings.
Set layers opacity to 30%, and we’re done. I also added a gradient map to one of the letter layers. Here’s final result. Click to enlarge.
Download wallpaper (various sizes):
Now let’s look at some great typography examples to get more creative ideas!
45 Great Typography Examples To Inspire You!
This time we’re gonna show you some truly great typography examples. This can be used many places; in magazines, advertisements, websites, logos and more. These great pieces of typography design will show you that there are no boundaries and that you can make almost anything with text if you have a good portion of creativity and talent.
Typography Examples To Get You Started On Your Next Design!
Typography can in today’s terms be so much more than what you find in a book or magazine. It’s turned into a very inspiring form of art, and there are many great pieces out there. Many times they can be mixed with either other graphical elements or some sort of poem or saying. Here we’ve picked out 50 pieces that can inspire you and maybe give you some new ideas.
1. Burdened by ~dylanroscover
2. En Masse by ~clockblock
4. I Speak Alone by ~Gordorca
5. Beauty by *mrgraphicsguy
6. I am not myself by ~OrigamiSuicida
7. What Lies Within by ~um0p3pisdn
8. Got a Light by ~DesertViper
9. Typography by ~e-emoo
10. John Lennon in Type by ~Dencii
11. Come Back To Me_1600x1050 by ~Dmaghar
13. Steven Paul Jobs by ~dylanroscover
14. Instant by *Shinybinary
15. The Raven by ~swordfishll
16. DUB.TILL.DAWN by ~ICDP
17. Lion by ~rickystuffedpie
18. The Garamond Fox by ~StolenStars
19. Think Differently London 2 by *crymz
20. Martin Luther King Jr. in Type by ~Dencii
22. I love typography by =mindCollision
23. Triumph over Chaos by ~MasterC88
24. Big Yellow taxi by ~TonyFbaby
25. Love is an accidental gift by ~mujiri
27. Broken Stars by `shebid
28. The Fall of Sin – Extended by =Anton101
30. ARTRIBUTE header by ~H3AD3AD
31. science typo by =Mirousensei
33. Conceptual Art by ~AagaardDS
34. CMYK by ~TheSpinxSage
35. TYPOGRAPHY with Helvetica by ~sarakhanoom
36. Highway of Endless Dreams by ~Axytrix
38. Typography by ~AilesdeMort
39. The Dark Knight by *Prain
40. love’ by ~
41. creativity is my thing by *razangraphics
42. love and knowledge by =CHIN2OFF
43. Doing it daily by ~northcoaster
44. Nothing Less Than Forever by ~jawalyfe
45. social networking by ~IigouthamiI
We hope you’ve gotten some inspiration from these great examples that show the diversity that can be found within typography. Remember that beauty is in the eye of the beholder, maybe you’ve liked some and disliked others. We would also love to hear your opinions. Which is your favorite? If this is not enough, we have prepared some great examples of minimal typography design. Check it out!
50 Awesome Examples of Minimal Typography
Typography is an art, not just simple art but combination of different typefaces merged into graphics to provide a bewitching output, which is without any doubt an Art. When minimalistic designing approach is integrated with composition of type, output can be jaw-dropping. Today we are featuring 50 examples of minimalistic typography designs for inspiration, most probably they will make your jaw-drop.
1. Feelin’ It
4. Happy Birthday
7. Love to suck
8. Johnny Kon
11. Hell Yeah!
15. More fish
16. Morrison Solid
17. Mother Nature
18. My valentines
20. Pretty Sure
27. Sweet nothings
28. The Dots
29. The plan
30. Type Veteran
34. Words of love
35. 24 × 42 grid
43. Computer Arts
Let’s get to the next section, where we are going to get stuck into the typography even deeper, as we want you to be the best you can be. Ready? Okay, let’s start!
How to Not Suck at Typography And Become A Professional
We probably would all be savages if printing was not invented. The invention of the Gutenberg movable type has been a very great leap towards the spreading of information from one person to another and from generation to generation. After this momentous invention, greater finds have flourished and soon became what we know now as the software. Of course, without the invention of the movable type, printing would not be invented and all falls into oblivion, including one of the most reliable inventions man has ever made – the Internet.
Whether we admit it or not, the invention of printing is the unofficial father of all technology. Without it, technology would just be limited to mechanical modernization. Software would have probably not existed and the world would be a much gloomier place. Truly, the gallant invention of the Gutenberg movable type saved humanity from the decadence of ignorance.
This is why web designers value the importance of text. Though the print media is considered to be dying, web designers and developers have not put into obscurity the importance of text in spreading information. No matter how forgotten it may seem, words are still the primary means of spreading information. Words still have the power to influence, inform and entertain, which is why the great geeks of the Internet try to maximize the power of texts. They have been attempting to fuse texts with the growing and younger mediums for it to fully utilize its abilities. Hence, typography.
Smashing Magazine describes typography as the soul of design. It includes the proper selection, juxtaposition and styling of typefaces to produce better effects so it serves its purpose better. It can breathe life to the barren text. With the booming of the digital era, typography has evolved all the same. Today, the art of beautifying letters include a wide array of topics and real life applications. Typography artists now focus on the communicative aspect of typography, making it more readable, identifiable, sellable and, of course, entertaining. We see typography almost every day in our lives- in the book you’re reading, in the newspaper your seatmate is browsing, in your daily advertisements, in the Internet, in the signs at the street, everywhere. Truly, the importance of typography has gone wider and wider as it evolves in terms of design schemes.
It may be seemingly easy to study typography. Some may say that , ‘It’s just letters; how could difficult that be?’ but as easy as it seems, typography is an art that is very difficult to master. Most designers have hart times perfecting their skills in typography. Some even spend a great deal of money for it and never get better. Yeah, it goes a little frustrating at times, but studying this art form and mastering it is one great opportunity to earn and be known.
Be that as it may, you can never learn typography if you don’t start learning it. And when is the better time to do it than now!
In this case, because typography is a very complex field, the need to discuss the don’ts are very grave.
So what are the don’ts in typography?
Do not use too many typefaces in one page
I’m sure almost everyone has a hundred+ fonts saved in their hard drives; and I bet half of us want to use them right? But let me cut your enthusiasm with this reminder, use minimal typefaces in a page. Having a lot of worthless, different typefaces in a page will suggest an inconsistency in your design style and could give the readers a hard time reading. Just put it this way, you buy all kinds of food in the supermarket, would you eat the all at once in a single munch?
Links that would help
- Choosing the Right Font: A Practical Guide to Typography on the Web
- “What Font Should I Use?”: Five Principles for Choosing and Using Typefaces
- How to Choose the Right Fonts for your Project
- What the Font? Choosing The Right Font For Your Project
- How to Select the Right Fonts for your Website
- A Beginner’s Guide to Combining Multiple Fonts
- How to Choose the Perfect Font for Your Needs
Do not use serif and sans serif fonts interchangeably
Most people tend to interchangeably use Serif and Sans-Serif Fonts. The truth is, doing this might affect the readability of the page. Sans Serif Fonts are usually used for pages that should be seen from afar. These are very readable even from a great distance. Meanwhile, Serif Fonts are used for private-reading activities. That is why most books use serif fonts.
Links that could help:
- Working with Types: Typography Design Tutorial for Beginners
- Serif vs. Sans: The Final Battle
- Serif and Sans Serif Fonts
- Which Are More Legible: Serif or Sans Serif Typefaces?
Do not use all caps all the time
WHAT DO YOU FEEL WHEN YOU READ THIS PARTICULAR SENTENCE?
Didn’t you feel congested and annoyed? Caps are used to emphasize important messages in the body of the text. But to type a 100-word typography in all caps, it’s too much. People might think you’re angry or shouting. Remember, not all messages are important. Know the difference.
Do not use Comic Sans, Papyrus or Curls MTz as much as possible
Okay. You’re probably wondering why. Let us think of this as in this situation. You’re listening to a song, the song was very good. The lyrics were awesome and the melody is superb. Because you felt the song was really good, you listened to it all week, non-stop. The next week, you hate the song.
This is what happened to these fonts. They became too mainstream. They were repeatedly used and clichéd to a point where everybody is sick and tired of them. Try something new. There are a lot of fonts out there. You won’t be even able to choose from them all.
Do not auto-Kern
Kerning is the measure of the spaces between characters. Kerning adjusts individual letters in a typeface and creates a visual appeal in the text. Photoshop, a tool we love to use in making typographies, is a great program. It has an auto-kerning function but it’s never as accurate as those squiggly balls in your eye sockets. They are way better because sometimes metrical kerning is faulty and produces a mathematically correct but visually distorted type.
Links that could help
Don’t use texts below 10 for the body
Not everyone can literally read between lines. Keep your texts above 10 for them to be easily read. If you’re having trouble because of the large amount of content to be placed in such small space, contemplate if you reduce the text or apply spacing adjustments. Never reduce the font size to 10 below, except if you want the message to be ignored. You’re not making a typography for ants.
Links that could help:
- Typographic Design Patterns and Best Practices
- Secret Symphony: The Ultimate Guide to Readable Web Typography
A bad typography is as bad as a stale bread. It’s there but you can’t eat it. It’s there but you can’t digest it. The best thing to remember about doing typographies is that the message is superior to everything. The reader must understand the message before anything else. As you already know us, we can’t leave this just by these lessons. Read ahead and learn more trough our great typography guide.
A Handy Guide to Proper Web Typography for a Successful Design
Basically, typography is the art and technique of arranging typefaces for communication purposes. In other words, typography is a simple arrangement in order to transmit a message, while good typography is the attention to visual accuracy and details, even the small ones. Typography started when writing appeared. The most simple arrangement of letters was also some sort of typography. Nowadays, typography is an element we see everyday and everywhere — Prints, Books, Newspapers and letters, TV and Web. Even the foremost websites were caring about typography, and were trying to improve it as much as possible with the resources available at that time.
Web typography is just one of the most recent branches of the general typography concept. While images can also transmit a message, most of the content available on websites is made up of text, that is why so much attention has been given to web typography lately. While planning and designing a web page, typography isn’t less important than the visual hierarchy, selection of correct colors, functionality and many other features. We should never under-estimate the importance of web typography, nor think that it plays a minor role for a great user experience.
Anyone who strives to have amazing typography must understand that print typography and web typography are totally different things. While some principles may be the same, web design is a totally different “environment”. Both print typography and web typography have their own rules and guidelines which must be respected. A crossing of these two may result into mixing different principles which almost have no chance to exist together.
While you may already be familiar with hierarchy in web design, you may feel that there is a hierarchy in typography as well. Hierarchy in typography will give you a starting point for reading the text displayed. This is quite important because you always want to deliver your message correctly and you want your readers to understand it properly. Lots of websites don’t have this issue anymore but you should keep it in mind, so your website doesn’t appear on a one-century-old websites’ list.
While there are really very few websites with typography hierarchy issues, there are quite a lot with spacing issues related to their typography. As there must be a logic in spacing between all elements on a website, so there must be a logic in your typography spacing as well. You may want to get familiar with a few terms like: Leading Size, Kerning, and Tracking.
Leading Size is the tool which allows you to increase or decrease the whitespace generated between the text rows available. You can read here why increasing it will help your readers reading your text. Kerning is the process of adjusting the spacing between characters in a font with the aim of achieving a more pleasant visual look. By using the Tracking tool, you can achieve almost the same effect, the only difference between Tracking and Kerning being the space generated. While tracking generates an equal amount of space between each character, kerning adjusts the space based on character pairs.
Colors and Color Palette
The colors in typography don’t specifically mean the color of your text which is usually of one color, instead they mean the over-all colors used on your website. All the colors and graphics used on the site will represent a “background” for your text, that is why you should be careful with the colors used. They must always fit the color of your typography, and should never obfuscate your text. You can also experiment with bigger-sized typography (also called as macro typography) to achieve better results. Defined in a simple way, macro typography is the use of bigger-sized text for attention-grabbing purposes. It is usually not longer than 1-4 words that is why it is important to keep it as short and correct as possible. It may be followed by some heading-sized text under your key message, but it’s not as important because that isn’t the focal point on your site, while big-sized text is.
Examples of Macro Typography in Websites
Font pairing is the process of combining 2 or more typefaces with the aim to create a nice combination. While this sounds interesting, for beginners it is a hard job. Choosing one font, or a few fonts that are nice is well, but when your aim is to combine 2 fonts to achieve a perfect paring, it is much harder then it sounds in theory. Font Pairing has the aim to reduce the flatness which may be created while using one font choice, even with different styles. It would be a good practice to use one font for all headlines you may have while the other one for simple paragraphs. There is even a great book by Douglass Bonneville with thousands of font pair combinations for those who’d like to see ready examples.
Contrast of Size/Weights
It would be a big mistake if you make your fonts non-differentiable. As you already know, it is very important to use a pair of fonts in order to have decent typography, and not some uniform text. Even if you have found an amazing font pair, you shouldn’t forget about setting correct sizes and weights for your fonts. Setting unsuitable weights and sizes will basically ruin your pair as it will become hard to understand that you have used different fonts. Your fonts should never be lost in the background because of similarity, incorrect size or mismatched background color.
The old times are gone when designers had to use only fonts available on user’s computers or even images with text so they would see the correct font. As technology evolves, HTML5 is starting to get over flash, and there are a lot of amazing tools which would let you replace any font they have in the collection, without making your users install any specific font in order to view the text correctly.
Even though Google released its font directory only in 2010, it already has almost 500 font families. Google Fonts API is being widely used because of its simplicity and trust the company has built itself overtime. The only con Google Fonts has is its lack of really qualitative typefaces. Even if Google offers full font families, they don’t have those premium-looking fonts which would make your website stand apart.
Typekit is a well known service which has been used a lot over the years. It has become really popular because of its huge font collections. It has almost one thousands fonts and most of them are looking amazing. Typekit got popular because it offers those premium @font-face solutions that Google doesn’t offer. Launched in 2009, it also got some popularity being founded one year earlier than the Google Font directory. The only con which troubles some of its potential clients is the paid subscription method. It is a yearly fee you have to pay, besides this, you are also limited to a specific number of page views per month and fonts per website, depending on your plan.
The best thing about FontSquirrel is that it has lots of fonts available which are used widely and it is absolutely free. It is being loved for the number of nice fonts it provides and the absolutely free usage on as many websites as you would like. FontSquirrel even allows you to use a @font-face generator which lets you create your custom kit @font-face fonts.
Now to wrap it all up, let’s take a look at some of the tools to use when working with typography.
15 Super Useful Typography Tools and Frameworks
Nowadays, web design is almost 95% of typography. Typography includes the use of modern CSS techniques and web fonts, which makes it easy for you to obtain complex things carried out in no time.
A web designer who gets suitable typography tools can increase the aesthetic appeal of a website. These tools could make things easy and simple for you the way you render fonts. Moreover, you will have additional control over high-quality fonts.
In this article, we round up some of the 15 Best Web Typography Tools, Frameworks & Libraries for all such needs of a web designer. So that a web designer (you) can create a much better web typography conveniently.
It enlarges the font size in order to fill the containers with its complete width. Furthermore, this plugin also works out of the box with right nutshells and algorithms. Also, this tool measures the width of the container and the length of the character. Eventually, appending the size of font appropriately.
This tool works exactly the same as Modernizr. Nevertheless, except for one thing that it just tracks your browser engine so as to render fonts. Also, it adds custom classes which are based on its findings. These could be utilized to apply various styling rules for TypeRendering.
It’s a plugin which dynamically modifies the font size that’s based on the width of a particular wrapper. Also, it helps with implementing ideal numbers of characters every line with screen associated with any width.
It is one more, yet awesome tool that helps you produce the basic styles of typography for your design. This tool comes with line size, margin & height along with a user interface that’s typically a simple slider. It is also capable of generating styles SCSS, inLESS & Stylus.
It’s a tool accessible online, that helps to figure out the font size accurately. Furthermore, it also offers you with a simple, yet user-friendly GUI to include the font size base, font scale & family that you’re willing to utilize. These outcomes would also be visualized & you can work around with the scale & to get the precise value.
8. Font Pair
It is among the popular web font library which you would ever discover on the World Wide Web. This tool is utilized by hundreds & thousands of individuals and hosts over 500 font families. It’s a collection of Google Font which is paired with different combinations between typefaces & font families quite easily.
Typeplate is one of the best & the ideal starter kit for a web designer to set up typography. It comes along with a lump of essentials styles of typography which addresses small capital, scaling, colors drop cap, indentation, hyphenation code bock, blockquote & much more.
It’s a wonderful pack of CSS rules sets which define font scaling effectively, vertical rhythm & fair ratio of typography for you. This awesome tool is accessible in Sass & Stylus that enables you easily meet your project needs.
It is a curated outline design showcase that recognizes the textual styles used in web design. The main objective of this tool is to serve as a one-stop asset for web designers looking for typographic motivation for the modern design. Typewolf is one of the awesome assets accessible for everything identified with typography on the web. Typewolf will dependably remain an autonomous site that features typefaces from all sorts of foundries paying little attention to what organization owns the rights or where it can be bought or authorized.
It helps you to test the textual styles on any website. If you want to test, you just have to visit the official site of TypeWonder and you have to enter the site URL to test the font of any specific site. This tool is the best for those who want to create a site with a font, but not sure about font name and other details.
This site will allow you to preview fonts for free! You just have to pay for the text styles you need. This site also supports international character. If you are looking for reliable, fast and easy, this is the one you can choose. It works on almost all modern browsers like Opera 10, Internet Explorer 5, Safari 3, Firefox 3.5, Chrome, Blackberry devices and Android devices.
FontFriend is an awesome bookmarklet for typographically fixated web designers. It empowers quick checking of text styles and text styles straightforwardly in the program without altering the code and invigorating pages, making it the perfect partner for making CSS textual style stacks. This one is very easy to use and works on almost all modern browsers.
The above-described typography tools, CSS frameworks, and libraries are really great for the web designer. If you want to build an awesome and great looking website, then try them.
About the Author:
Navid Tayebi has considerable experience in digital marketing and brand development. He is the founder of Creative Over, an Orange County Web Design Company, CA that primarily focuses on providing digital marketing solutions to small- and medium-sized businesses. He is a versatile, organized and self-reliant person. His areas of expertise are refinement and development of marketing goals, promotional activities, pricing strategies and branding. You can find Navid on Twitter, Linkedin, Google + and Facebook.
Trough out this article you have been able to learn how to design great wallpaper with amazing typography, numerous examples of great typography and learn more and typography on general. We hope that this is a bookmarking article and if you like it, do share. What is your opinion? Tell us in the comment section.