Emma Butler Is Our Design Director | Turning Ideas Into Design That Works | Full Stacks https://fullstacks.pro/about/emma-butler/ Make your marketing better. Mon, 15 Dec 2025 21:36:30 +0000 en-US hourly 1 https://wordpress.org/?v=6.8.3 /wp-content/uploads/2025/11/FS-Square-96x96.png Emma Butler Is Our Design Director | Turning Ideas Into Design That Works | Full Stacks https://fullstacks.pro/about/emma-butler/ 32 32 The Readability Formula: Making Your Website Easy-to-Read https://fullstacks.pro/the-readability-formula-making-your-website-easy-to-read/ Thu, 22 Feb 2018 00:00:00 +0000 https://fullstacks.pro/the-readability-formula-making-your-website-easy-to-read/ Customers and clients don’t like to struggle: give them a comfortable reading experience, and they’re more likely to give you more of their time.

The post The Readability Formula: Making Your Website Easy-to-Read appeared first on Full Stacks.

]]>

Have you ever been reading an article, and after a couple of lines started to skim and then thought about closing the tab — even though you’re really interested in the subject and set out with the intent to read the entire thing?

You can tell the content is written well, and you really want to make it to the conclusion, but something’s preventing you from doing so and you can’t quite put your finger on it…

…could it be that the typographic choices on that website are causing you to stop reading the content? 😱

Readability is about more than just having your content make sense — you can spend a pile of money on a copywriter and check reading levels, but if the layout makes reading difficult you might as well set that money on fire. The right balance between font size and line length is a big difference-maker in the science of readability.

If a font size is too small and the line length too long, readers will have to strain to read the text, which causes their eyes to fatigue. On the other hand, if the font size is too big (making the line length too short), readers are forced to jump to the next line of text too quickly, which — you guessed it — is also hard on the eyes! (You don’t want your audience looking at their screen like this while reading your content.)

The last thing you want is for your website to be referred to as “too hard to read”. Customers and clients make choices quickly when you put them at ease. A comfortable reading experience leads visitors to a) easily read your content, and b) make decisions faster.

Line length & font size

Diagram of text illustrates correct line length for easy readability (it is 75 characters)

Making things as easy as possible to read isn’t a new concern — for years typographers have said 65 characters per line is the perfect line length (or “measure”) for print. However, it’s 2018, so let’s embrace our digital-first way of life. Here is the golden rule to keep in mind for web typography:

45 to 80 characters (per line) is the ideal line length for text on websites.

The final number of characters per line depends on the font, but so long as your content is falling within the above parameters, you’re making it as easy as possible for visitors to read your content.

For evidence of this line length in action, look at one of the most popular sites for publishing: Medium. With a maximum of around 80 characters per line (and a healthy font size of 21px on large screens), Medium ensures extreme readability and comfort.

What about the size of the font?

Line length and font size work together to create an optimal reading experience — the font size must also be large enough to be easily read. What’s the point of using a proper line length of 60 characters if your body text is set to the same size used for side-effects on prescription drug packaging? (There’s a reason those side-effects are shown in such small print — it’s because they’re trying to discourage people from reading them.)

Your base font size (for large screens) should be somewhere in the range of 18px to 26px.

However, you can’t just increase the font size on your website, pat yourself on the back and be done with it. We have to consider endless screen sizes, large and small!

Larger font sizes typically look strange on smaller screens, because they take up too much real estate. This creates an uncomfortable reading experience because lines of text get cut off too quickly, forcing readers to slow down.

A smaller font size must be delivered on smaller screens.

To keep the line length of the text in that desired 45–80 character per line range, the font size needs to be reduced on the smallest screens (i.e. mobile devices). Using a smaller font size on small screens won’t shock visitors to your site, as people typically hold their phones and tablets closer to them when reading.

Enter: Fluid Type

The great thing is we can use fluid type to achieve this change in font size! Fluid typography resizes smoothly to match any device width, meaning we can present a larger font size on larger screens and a smaller font size on smaller screens — and adjust for all screen widths in between.

For example, our website displays the body copy at 21px on large screens and 16px on small screens. In between those two extremes, the font size will adjust proportionally to the size of the window or screen it is being viewed on — which is where the “fluid” part of the name comes in.

Example: Wikipedia

Jurassic Park wikipedia page to show the standard Wikipedia line length

Wikipedia is a great resource, but unfortunately on large screens it typically provides a subpar reading experience. In the screenshot above, the line-length is as long as 104 characters, and the font size is only 14px!

Using “Skinny” — a Google Chrome extension which limits the width of any web page to improve website readability on large screens — we can see how much easier it is to read a Wikipedia article with a line length of 50 characters and a font size of 18px.

What about the space between the lines?

Line height (the vertical space between lines of text, also known as “leading” or “line spacing”) is important as well.

Much like line length and font size, line height also affects how people read. If it’s too tight, the lines of text become hard to scan. Too loose and the lines of text appear to be unrelated to each other, which is confusing for readers!

The perfect line height depends on the design and size of the font itself. There is no magic number that works for all text (although it’d be cool if there was!).

A line height of 1.5 times the font size is a good place to start from, and then you can adjust accordingly.

Don’t try to do this all alone. Have other members of your team take a look at different line heights to get their opinion on what is the most comfortable to read!

Keep in mind that smaller text typically needs more line height, not less. This is because people scan horizontally and vertically when reading and a line height that is too small (also called too tight) makes people jump over sections. For example, our body text has a line height of 1.6x the font size, but our larger header text has a line height of 1.3x.

The word "Reading" is laid out on a couch

Line length + font size + line height = comfortable reading

Although it might seem like a small thing to consider, paying attention to (and improving) the design of the text on your website is an impactful way to remove many of the obstacles people face when reading online content.

People don’t like to struggle: provide your customers and clients with a comfortable reading experience, and they’re more likely to give you more of their time.

There are many other things to consider when choosing the typography of your website (font choice, font colour, hierarchy, etc.) but creating the right balance between font size and line length will be a difference maker in getting your clients and customers to actually read your content.

People need to read what you have to say to understand why they should contact you. Remove as many barriers as you can! Make people as comfortable as they can possibly be. People like ‘easy’ and it’s up to you to give ‘easy’ to them.

______________

If you want to dive into even deeper typographic waters, be sure to check out Butterick’s Practical Typography Guide — the “Typography in Ten Minutes” section is a great place to start!

The post The Readability Formula: Making Your Website Easy-to-Read appeared first on Full Stacks.

]]>
How to Take a Decent Head Shot Using Your Phone https://fullstacks.pro/how-to-take-a-decent-head-shot-using-your-phone/ https://fullstacks.pro/how-to-take-a-decent-head-shot-using-your-phone/#respond Tue, 01 Sep 2015 00:00:00 +0000 https://fullstacks.pro/how-to-take-a-decent-head-shot-using-your-phone/ Because sometimes, you gotta work with what you've got.

The post How to Take a Decent Head Shot Using Your Phone appeared first on Full Stacks.

]]>

In a perfect world, your brother/sister/mother/child would be a professional photographer who owed you a favour. You’d have them take beautiful head shots of you and your employees for FREE, which you’d then toss on your recently redesigned website for the world to see.

Alas, we live in an imperfect world.

But do not fret! This doesn’t mean you have to settle for crappy head shots on your website. Budget and time constraints often lead our smaller clients to taking a DIY approach to head shots for their websites, and you know what? That’s ok. While we encourage everyone to seek out a professional photographer to take brilliant portraits of their team, we understand that sometimes you just need to get images of your staff on your website as quickly as possible. And sometimes, the only decent camera you have kicking around is the one nestled inside your trusty iPhone (or Galaxy Note, if you swing that way).

We’ve compiled a few handy tips on how to take a decent head shot with your phone — follow these and you will end up with A++ images you’ll be proud to use to grow your business.

Have someone else take your photo

Although there are plenty of people on Instagram who have mastered the “art of the selfie”, we suggest having a friend or colleague take your headshot — the result is much more professional. (Plus, the front-facing camera on your phone takes lower resolution images.)

Use a neutral background

Choosing a neutral background — a plain or brick wall, a fence, even some simple greenery — will keep the focus on you. Watch out for objects in the background that might end up looking like they’re sticking out of your head.

Use even lighting

Probably the most important tip we can give you! If you’re outdoors, find a nice shaded spot to have your photo taken. Being photographed in direct sunlight creates bright highlights and heavy shadows on a person’s face, which isn’t very flattering. Overcast days are the best for shooting outdoors, because the light is very even. If your photo has to be taken indoors, try to find a spot that is lit with natural lighting (from a window).

Jen Salamandick posing, one incorrect and the other correctly.

Stand out!

Wear clothing that contrasts with your chosen background — no one wants to blend in with a grey wall! To look natural, wear the kind of outfit that you would normally wear to work. Dressing up in a tux is not necessary.

Pick a style and stick to it

Brand consistency is important — and the same is true for your headshots. Pick a style and stick to it! Don’t worry, this doesn’t mean making everyone stand in the exact same pose wearing the exact same thing, unless maybe your small business is a summer camp. Making little things consistent is important, such as using the same (or similar type of) background and shooting everyone at the same time of day (to match lighting). By doing this, you ensure each of your team members’ images look like they came from the same place.

VOGUE. (Just kidding — strike a casual pose.)

Try and stand in a way that is relaxed, with your body angled slightly away from the camera. Fold your arms, have your hands on your hips, or put your hands in your pockets — whatever feels most natural. Remember to keep your shoulders back and your chin up.

Hold your phone steady

Make sure the photographer keeps the phone as still as they can by using both hands, and keeping their elbows tucked into their sides for support. (Breath normally — don’t let the pressure of being a photographer cause you to hyperventilate.)

Use HDR mode

HDR is a mode of shooting that combines several exposures to create a single picture with more detail and a greater range of tones and colours. If your phone’s camera has it available, please use it.

""

Lock the auto-focus

Tap (or hold, depending on your phone) the screen where you want the camera to focus — the face — to lock the focus and keep the image sharp.

Give your head some space

Remember to leave space around your head and shoulders — the image can always be cropped tighter later if necessary. Don’t worry about including the lower torso and legs — this is a headshot, after all!

Don’t use digital zoom

Digital zoom lowers the resolution (and therefore quality) of an image. Have the person taking your photo step closer to you instead.

Shoot away!

The beauty of digital cameras (including phone cameras) is that you can take as many pictures as you want until you get the right one. Don’t be afraid to take a few — you can always delete (or meme) the ones that don’t work out!

That’s all there is to it! We wish you the best of luck with your DIY head shots. When you’re ready to get some professional portraits taken, get in touch — we can recommend some awesome photographers.

The post How to Take a Decent Head Shot Using Your Phone appeared first on Full Stacks.

]]>
https://fullstacks.pro/how-to-take-a-decent-head-shot-using-your-phone/feed/ 0