For this exercise, I’m focusing on Grandparents Day and looking at combining a photo with a typographic arrangement of a quote. This one isn’t a step by step tutorial showing each step. Instead I’ll explain some of my thought processes and share some tips to help you try something similar.
While typography sits on a bedrock of fundamental design principles, there’s no clear cut right and wrong with regard to creative arrangements. If you stick to some basic guidelines, you should have little trouble producing attractive arrangements.
The image I’m working with is a free file from Pixabay that you can find here – https://pixabay.com/en/nostalgia-sunset-beach-nature-729528/
I used Canva to produce my graphic as it’s free and easy to use. The downside is that you are limited to using Canva’s set of fonts. Obviously this may limit your typographic choices, so feel free use any other web app or computer software that you’re comfortable with. Some web apps, including BeFunky’s Photo Editor, allow you to use the fonts installed on your own computer.
I used Canva’s Facebook Post template so the first thing to do is place the image. It’s immediately obvious the space that’s available to work with for the typography. The dark lower part of the image is completely featureless and is an ideal space to work with.
I also want to include some text referencing Grandparents Day, so add that first. I could have placed this text in the upper half of the image, but I prefer this taking a secondary position. The placement of this line of text further dictates what space is available for the quote.
The quote text will have a relatively wide and short layout.
When you place your photo into your empty document, think about how you’ll position it to leave space for text. Many images won’t be as clear cut as this in terms of where text can be placed. If your image is particularly busy, you may need to add a semi-transparent overlay to help the text stand out. This post talks through how to do that with Canva – https://makeforbusiness.com/using-canva-create-graphic-text-transparent-overlay/
The quote is the primary text in this graphic. I’ve chosen to use Bodoni FLF, a serif font with strongly contrasting stress, particularly in the bold weight. The bold and italic options add variety to the plain version of the font, which is important for this exercise.
The secondary font is Quicksand which is a sans-serif font with fairly generous tracking or letter spacing. All I was looking for was a clear and easy to read font to complement Bodoni.
Identify the important words
The quote I’m using is “a grandparent is old on the outside but young on the inside”. At the risk of offending some of you, from a grandchild’s point of view, grandparents are always old on the outside. It just goes without saying. In this quote, I see “grandparent”, “young” and “inside” as the key words that embody the message.
Choose your visual tools
Having identified the key words, we need to decide how we’re going add visual weight to them. In my case I’ve literally made them a heavier weight by using bold text and have also increased the text size. The rest of the text is kept to a legible size, but has less visual importance in the normal weight italic.
I could have italicized the keywords too and made the rest of the text plain Bodoni. It was just a personal choice. As well as size and weight, you could use color to help the keywords stand out or set them in a different font. There are multiple ways to achieve the same end goal.
Put the text together
Creating a typographic arrangement like this is a bit like playing with building blocks. Our first job is to create our building blocks. This simply means breaking the quote into keywords and the text between the keywords.
That gives me “a”, “grandparent”, “is old on the outside but”, “young”, “on the” and “inside”. When you’ve got your blocks of words, add each block to the graphic separately. This makes it easy for you to move words around, change their size and look at different ways to fit them together. During this process, feel free to break blocks of words into smaller blocks.
I broke my first block of text into three and the second into two to help me achieve a visually appealing layout.
I split the first block of text between “on the” so that the descender of the letter “p” could sit between them. This also allows for the spacing between the top of the two new blocks and “grandparent” to be tighter. I felt splitting “but” from the block and bringing it down to the next line was more pleasing.
I split the second block of text to create the stepped effect. The word “on” sits above the tittle or dot of the first “i”. “The” sits down in the space between the two tittles which helps to make the text fell more coherent.
Sometimes we can cheat
I couldn’t find a way to make the “a” tie together with the text that I was happy with. As a bit of a visual cheat, I added weight to the letter by reversing it out of a white disc. In my image, the lower part of the photo isn’t pure black, so I matched the color of the “a” to the image. You could do this visually, but I used a free browser add on called ColorZilla to get the exact color of the background. Google Chrome users can get it here and Firefox users can get it here.
Give it a go
Hopefully this will have helped you to understand some of the things to consider when creating a typographic arrangement.
As I said earlier, there’s no clear cut right and wrong solutions to exercises like this. Ensure that you’re nailing the basics and from there you can experiment and be as creative as you like.