How to design a typographic layout | CharliMarieTV

How to design a typographic layout | CharliMarieTV


Recently I’ve had people asking me if i’m
going to be doing any design tutorials. I can’t see myself ever doing like tutorials
for using design software, because there’s a lot of people on youtube doing that who
are way better at it than me. But I thought today i could perhaps give you some advice
for mixing fonts to create a typographic layout. It’s something that’s really easy to accidentally
go overboard with but also something that can look pretty cool if you get it right,
so today I thought I would give you some tips on that. First off, I would recommend starting with
a short phrase. If you work with a longer phrase it’s much harder to make everything
look cohesive and not too overwhelming, so starting with a short phrase first is definitely
best. Here’s an example from a Tumblr that I really love called Five Words where they
take 5 word phrases and make typographic layouts from them. Starting with a short phrase will
let you get started with mixing different fonts and tuning your composition skills. When you’re choosing what fonts to use,
which can be difficult because there are so many out there, it’s best to choose ones
that contrast, but still look balanced together. By contrast I mean, maybe they’re different
styles; one serifed and one sans serif, or maybe different shapes, like one is really
elongated and the other is more short and fat. I find it’s good to try mix a plainer
sans serif typefaces in if you want to use a more ornate or display typeface like this
one, or if you want to use a script font perhaps. Doing this makes your piece more readable
and more pleasing to the eye and lets the eye breathe a little bit I guess as not everything
is over the top and crazy. You don’t want to use fonts that are too similar because
it will look a bit weird, and if you are using a script font, I find it’s best to stick
to just one style of script for the piece and use other sans serif, or slab serif fonts
with it, rather than using other script fonts because I think they clash in a not-so-great
way Here’s an example from five words where
they’ve used a different typeface for every single line of the phrase, but it looks great
because the typefaces are all quite different from each other but still work well together.
And if you don’t want to use a different font for every line of your phrase, because
it can be difficult to find lots of fonts that work together well, another useful thing
is to have a base font, and then use a contrasting font to call attention to certain words. Here’s
an example of that, where they’ve used two different weights of this slab serif font,
and then used this chunkier sans serif for some contrast. This point about picking a base font, or a
base set of fonts to work with definitely comes into play in a longer piece. With a
shorter piece could use a different font for every line and it still look alright but things
can get out of hand pretty fast if you do that in a longer phrase. Here’s one of my
pieces that I did for an indie publishing company, where I used I think 4 different
fonts and played around with the treatment of them to get an interesting layout, because
this was a really long phrase to work with. You can still bring in one-off fonts to a
longer piece though, and that’s what the designer of this parks and recreation quote
print did. You can see in here the same fonts are repeated throughout, but there are some
that are only used once as well. I absolutely love the colour palette of this
print too. I think it’s easiest to make a piece look cohesive if it’s all in one colour
like mine and some of the Five Words pieces, but the use of the two colours in this print
makes it look really interesting and quite cool. When you’re using loads of fonts I’d
recommend not going too crazy with colour just so there’s something consistent, but
as you can see in this piece, they’ve used the same colour palette throughout so it really
works well. A design like this with all its different
fonts and colours is much harder to read than one like this for example, but that’s okay
because these both have totally different purposes. One is to advertise a message, so
it’s really important that the phrase is still readable, and one is more of an art
piece that does also tell a message if you care to read it properly but it’s mostly just
a cool piece of design for your wall. So knowing what you’re trying to achieve with your
design, what its purpose is, will help you decide what mix of fonts to use. With this type of design it does take a lot
of effort to get it to look like the words work so easily together even though it may
look to an outsider like you’ve just picked a couple of different fonts for different
words. And to get that ease and effortless look I think you really have to enjoy what
you’re doing, so give it a go and have some fun I’ll leave some links down below to some of
my favourite websites to get fonts from, and it would be awesome if you could leave your
favourite font websites in the comments so that we can have this giant resource and all
get loads of fonts. Hope you found this video useful! make sure
you give it a thumbs up if you did and let me know what you thought about this type of
video. and I’ll see you next time. bye!

69 thoughts on “How to design a typographic layout | CharliMarieTV”

  • One free website that I, personally, LOVE to use for fonts is dafont.com . Their selection is very wide, however it is categorized to make it easier, and there is a search bar offered if you are looking for something very specific. Hope this helps!

  • HannaCreative says:

    I really can't get enough of your design videos!! πŸ™‚ This was so helpful. I've done a few typographic layouts in the past and they all took sooooo much time and effort. I'm quite a perfectionist when it comes to stuff like that^^ but with these tips maybe my next one will be a bit quicker. Thanks πŸ˜‰

  • Hamish Harrison says:

    Liking the design videos! Could you challenge yourself and make a video about design on a budget or even free? I would be very interested about making a logo or even a tee design! Here's a website that could help you if you end up doing it: canva.com

  • yiiihh! πŸ˜€ thanks for this!! will keep these advice in mind… i always try to make typography but i think i get too excited with the fonts that are available and use them all. Now i wanna visit old designs and see what i've done before hahahaha…

    auie
    www.theblackstilettos.com

  • Lucia Montes says:

    The scene from that parks & red quote is one of my favorites! haha btw I loved this video! I've tried mixing fonts a few times and it never looked quite right, so I'm gonna follow your advice and see how I get on with it πŸ™‚

  • This is so helpful! I always wonder if there was somewhat of a 'formula' to getting a good flow when using fonts. Great video Charli πŸ™‚

  • CHARLOTTE DARBY says:

    Found this really interesting and I love hearing people talk about things that they are passionate about and interested it! What are you wearing on your lips? It's a lovely shade xxx

  • This is a great reference video! Thanks, Charli. I was super nervous last year picking out fonts for my Letters to July videos, even though it was only for an end slate xD I'll definitely come back to this the next time I need to consider font matching πŸ™‚

  • I have a question that I am so worried about. How do you use tipography without getting in legal troubles if you publish them anywhere? (appart from those that come with your pc-mac)

  • Madison Murphy says:

    Girl, I am LOVING your design videos. I'm currently in school (again) for design and I love seeing your tips in an applicable way. Keep it up πŸ™‚

  • I really enjoyed this sis! Love the way you had the different typographic examples and tips coming in, also loving how pretty all the type layouts are, I wish I could do that!

  • Kristopher G says:

    Awesome vid! Font Squirrel is a FREE font site btw. Make a part two please! You are so talented and I love your advice πŸ™‚

  • Really cool video! I think all of your tips were so on point πŸ™‚ Here's a suggestion for a video you could make: what about a brief history lesson on typography? Maybe explaining the differences between Humanist, Old Style, Transitional, etc… πŸ™‚ That's a subject I'm really passionate about and I think it might be interesting for other people too.

  • Tina Till Tientje says:

    Very useful and inspiring video Charli, thanks! By the way: Jessica Hische (almost) has her book out: In Progress. Really want/need that book!

  • The Pink Glasses Creative Studio says:

    LOVE your design videos. I've recently fell in love with fonts from www.creativemarket.com They feature 6 items every week for free, not all of them are fonts, but I've collected a handful of fonts from them now and love them. I have a few others on my "wish list" right now to buy as well.

  • Just got yourself a new subscriber. I found this video to be very helpful and informative since I, myself have always struggle with typography.

  • Hey and thank you Charli. Good video,this can be applied to hand lettering,these steps so it's very helpful. There are many websites you can buy fonts,I like MyFonts.com,but it is quite expensive if you are a student,CreativeMarket it another great source with good prices.

  • Π’ΠΈΡ‚Π°Π»ΠΈΠΉ ОлСняк says:

    Hi
    your video is awesome !!!!

    tell me please… how I can get your red fonts board ?

    thank you in advance

  • Great video, Charli! πŸ˜€ Would you mind posting the names of some of your favorites fonts? Maybe some of the fonts used in this video? That would be really helpful. Thanks for all you're doing!

  • LOVE LOVE LOVE just what i need great tips….BUT i would love to see you do it set it up in photoshop too..:) i am more of a hands on person..:) thanks!!

  • great video. thank you! πŸ™‚ btw. what font you used in the word GONE? –everything sucks when you're "GONE" thnaks! πŸ™‚

  • Where can I find more thins like Five Words? I'd like to see more typography-type things for inspiration but I'm not sure where to look.

  • would you please tell me how to get inspire or copy from other layout and make your own layout?
    what are the different designing process to make good layout?
    for ex. my friend collect inspiration like typo from different layout pick color form different layout and he make own layout

  • Kwisatsoundman says:

    Probably one of the very best tutos I've seen about typography in general and the different ways to layout your text in particular. Very refreshing speech, based on the practice. Thank you for this great video!

  • what are some sites i can go to that already have designs so i dont have to start from scratch….i dont think im ready to do that yet

  • CreativeMarket.com offers 6 free fonts and graphics every week for members (also free), many also including commercial use in the free offering.

    Good tute. Thanks.

  • There is a lot of technical "how-to" videos out there so it's refreshing to hear about the creative rationale behind the execution. Great advice! I think the shape of a typographic composition is important too, how the piece as a whole balances the negative space between the lines, or how some of the examples you showed have simple graphics or holding shapes to help create that sort of lockup that feels deliberate.

  • Arkansas Nature Photographer Randy Forrester says:

    Thank you, CharliMarie! I'm just beginning to play with designs such as this, and this is the best advice tutorials I've found …loads of information, easy to hear, and easy to follow! I'm sure I'll be watching more of your vids! Thanks! LIKED and SUBSCRIBED!

  • Great vid again. I'm actually taking notes on my phone so that I can remember this for later! When would you say a designer should start editing the fonts on their sites? Like, when in the design process?

Leave a Reply

Your email address will not be published. Required fields are marked *