If you’re a fashion/ lifestyle / beauty blogger or simply love fashion magazines, you surely know what editorial style looks like.

It’s this beautiful typography, elegant layout and use of imagery that makes you want to come back for more (and can’t stop flipping through pages!).

In my career I’ve created so many layouts in this style, that I feel it’s become my absolute favourite.

Especially now that I work with professional bloggers, I find myself creating more and more of these layouts.

 

Editorial style is like a good messy bun: looks effortless, beautiful and chic, but it’s actually pretty hard to achieve.

 

Editorial style is like a good messy bun: looks effortless, beautiful and chic, but it’s actually pretty hard to achieve.

 

In this blog post I’m going to explain the 4 most important elements that make up for this magazine-like look that’s so popular recently.

1 Typography

Typography is the absolutely most important element in this style. It’s what bonds all the elements together and creates this stylish look. If you get the typography right, you’re halfway there!

The trick is to know the typography rules enough to be able to break them consciously.

What I mean here, is to play around with font so it looks creative and playful, but make sure it still looks great and reads well.

When you design for editorial style it’s always important to treat each piece of content separately: depending on the length of the words and sentences you may need to adjust the letter spacing or a line height (the space between text lines). 

Each time I designed a promotional newsletter for Jimmy Choo it took me a few hours to play around with text and images. Even if you have a template you can reuse, it still requires quite a lot of work to adjust things to the specific content. It’s the only way to make editorial look good.

That’s why it’s so difficult to achieve it on the web. When I design blogs for my clients, I want to create something that will keep looking good even if they change the content.

This requires a lot of thought and planning for different scenarios. After all, I need to make sure the layout will look good with both very long and very short titles, a lot of images, or just one big one, and so on.

Editorial style is all about the contrast. In typography, we’re looking for contrast in text size and styles. Titles need to be a lot bigger than paragraph fonts, otherwise you will never achieve this look.

Fonts

Most magazines use serif, stylish fonts like Didot or Playfair Display, but you can find sans serif  like Josefin Sans or Proxima Nova as well. Those fonts are great because they have a few styles to chose from (which is super important here!).

Let’s look at my personal favourites: Playfair Display and Josefin Sans. It has a few styles, that you can see below. Those styles are so different, that they create this specific contrast we’re looking for: regular mixed with italic, thin mixed with bold. This creates a very editorial, stylish look that you can find in magazines.

Titles

The trick I always use in my designs when it comes to titles, is to mix italic with regular and thin with bold. You need to be really careful there, it’s very easy to overdo it and end up with a cheesy, DIY look which we do not want here.

What’s really important is to use the right styles to make it look bonded and like it belongs together.

 

Paragraphs

When you look at magazines, you’ll notice text is almost always justified – which means it’s neither left or right aligned, it fills the entire text box on both sides.

This creates this elegant, clean layout, making it look very tidy. It’s super important, because this tidiness makes up for the messy titles and creates the contrast we’re looking for.

It may not look good in some widths and font sizes, though. If you don’t know what I mean, look below and see. We want to avoid those text holes at all costs!

There are two ways of adjusting the text:

1. Changing the letter spacing of each row manually to make it fit perfectly – great for print, but unrealistic for web,

2. Changing the font size to smaller + making the text box wider or narrower to words flow better – this is tricky for blog designs, because if you insert different content, it may all look different again!

Handwritten fonts

Last, but not least: handwritten fonts! Those are super important here. Those are like a cherry on the cake. It’s not the same without them!

What’s important though – don’t overdo it! It’s the most common mistake.

Handwritten fonts are to be used only for 1-4 words maximum. You don’t ever write whole sentences using them. It cheapens the whole thing and doesn’t look good.

Best fonts to use are the ones that look effortless and like they were really handwritten. You don’t want a font that’s very elegant and curly. You don’t’ want a font that looks like someone has spent hours to make it perfect.

We’re looking after the written on a piece of paper look. Again, look at Garance Dore’s handwriting, it’s a perfect example:

Credit: Garance Dore

PRO TIP:  Rotate the handwritten word a little bit, so it looks like someone has just written it on the magazine.

2 Images

Another key thing to editorial style is the use of images. Check out your favourite magazines or blogs and you’ll see they use a lot of collages. Mixing a few images together and making them overlap each other is the favourite editor’s way of getting your attention.

It supposed to look like a moodboard, a set of images you would cut out of different magazines and put together.

Those need to be curated well. You need to look at colors so they go well together, make sure it’s not too busy and still makes sense with the content.

Usually, I would work on the collage and titles at the same time, because in editorial style – it’s all bonded together and connected.

3 Layout

The editorial layout is all about columns and blocks. Show your content in a way that’s appealing and engaging. Little sneak peaks of blog posts and clearly shown categories are the way to go.

Show your categories

When you look at great blogs that use this style (for example you’ll see the content is divided in categories.

“Editor’s picks”, favourite and most popular post, as well as some quotes and social media images.

Write in columns

When we look inside the posts, we’ll usually see text in 2 or even 3 columns. This makes reading easier, and makes up for this magazine-like style.

If you’d like to quickly achieve this style in your next blog post, you can simply download this plugin and use columns shortcodes!  Super easy peasyI

PRO TIP: Remember: using two columns means you need to divide your paragraphs evenly and think about the screen height. When people read the first paragraph (left column) they shouldn’t need to scroll back up to read the second one (right column).

Maximum screen height you should be planning for is around 650px.

Break down text

You want to avoid long, tiny paragraphs of copy. Break it down into smaller ones for better readability. Use images as section breakers.

4 Styling

Now my absolutely favourite part! Those small elements that add the stylish, magazine-like look.

 

 

Dropcaps

Those are the big letters at the beginning of paragraphs. Those should be used at the beginning of the blog post and only once per post.

Depending on your theme, you may have different styles of the big letter, but it’s totally possible to style them however you like (this requires some CSS knowledge though).

Quote marks

You can use dropcaps to insert a quote mark at the beginning of the paragraph. This looks great for short sentences that you want to highlight. Those could be on the left side of the paragraph, like the dropcap, or at the top, or middle.

Depending on your blog’s style you should choose either and use it consistently across your blog.

Lines
Diagonal, horizontal or vertical lines are also common elements in this style. You can use horizontal lines at the end of the last section paragraph to emphasize the end of the thought.

Diagonal lines look great put behind the image collage. Vertical or horizontal lines work great with some layouts, especially as dividers between columns or blog posts and sidebars.

 

Pencil/paint stroke
Remember, editorial style is supposed to be very creative, so you’ll often find paint or pencil strokes here and there, handwritten xoxo’s or signatures and this sort of stuff.

When done well, those add this personal touch and make the whole thing look like someone took the time to prepare it for you to read. And that is what we love in magazines the most.

We all love editorial, don’t we?

The smell of the magazine, the personal touch, the fact that someone has taken the time to prepare it for us to read and be inspired by. This is what we’re looking for in it. We know we’ll find quality, inspiration and interesting content.

Take those 4 tips and play around with your design, but remember: don’t overdo it!

In Editorial, everything has its place and you can be sure it has been thought through and curated. If you want to achieve this look yourself, you need to put as much thought in it as you would as an editor in a magazine.

You can show your existing content in a totally different way, making it even more irresistible. Good luck!

I’m a branding & web designer based
in Bristol, UK.

Yay! Now check your email for the Workbook!

Pin It on Pinterest

Share This