Video transcript:
Typography is such a complex topic, that I know I won’t do it justice here.
I almost didn’t record this video. But I did anyway because I just want to distill the essentials, the few critical aspects that make or break the typography on a photography website.
We’ll just take a site example with poor typography, and go through a few simple steps to try to improve the look and readability of the text. Something that you can then apply to your own photography website.
Let’s begin.
Here’s a sample About page on an “example photography” website that I created.
This page now intentionally does a ton of things wrong, when it comes to the typography, when it comes to how the text looks.
Currently, the text is clearly too small, it’s too hard to read, it’s gray on top of a white background, it’s not very readable. You have to squint your eyes to be able to read it, it’s not aligned. It’s just an example to show you how we can improve such a page.
And it’s not that uncommon. I’ve reviewed tons of photography websites over the years, and I did run across websites like this page, where the typography was just horrible.
So, let’s try to take things in order, to fix as much of the typography and the design of the page, when it comes to the text, as possible.
The first thing you should always start with is the font size.
Right now, it’s clearly too small. I’d say that the font size should be 17px at a minimum. But this depends on the rest of your website’s design, and it depends on the actual font face you’re using, because some fonts have smaller letters by design, so you have to crank up the font-size in your CSS code (or in your page builder) a bit further.
It’s now set to 16px, the font is “Times New Roman” which is one of the default font faces that come with all operating systems.
Let’s just try to increase that. I’d say something like this would be comfortable to read, we’re now up to 20px, but you can even go higher than that. But let’s stick to 20px in this example.
Next up, it’s clear to see that the line height is too small. So rows of text are too close to one another. And using CSS (the line-height definition) we can improve that.
It’s now 1.2, so 1.2 times the font-size. If we increase that to 1.7 will make it even more readable, like so:
Another change I would make to this page is the actual choice of the font face.
It’s now using ‘Times New Roman’ which is a serif font, so you have all the small accents for the letters, but the rest of the website is using a more modern sans-serif font. Like in the logo and in the navigation menu.
So if we change that, the page starts looking like this:
It just simply fits better with the design of the website in general.
Now once we change the font-face to match the rest of the site, we can take some extra time to further tweak the font-size and the line-height to make it look better, because like I said before, each font face has its own particular look of letters, and the letters are taller or they’re wide, you need more line height or not, and things like that.
Now that we got the fonts to look better, let’s also acknowledge the color of the text.
It’s gray, it’s medium to light gray now, and it doesn’t contrast enough with the white background of the page.
And we can fix that by changing the color to something darker.
Now the text is much more readable. You don’t have to squint to be able to read it. You don’t have to sit too close to the screen to read it well.
So the page is now in a better state, but I don’t like that the text on the left is not properly aligned with the logo, with the left-most element on the page currently.
There’s some extra space there, which usually needs to be fixed. Either in the “Theme Options” of your site, or by adding some custom CSS code to the site to fix all of this. Or if you have a page builder. It’s somewhere in there, in the padding or the margins of your elements, of your rows, of your columns, if you have columns like here.
If we eliminate that empty space on the left, it would look like this:
It’s now more pleasing to the eyes, because it’s properly aligned to the left.
And on the right hand side of the page, we have what’s supposed to be a portrait image there, since this is an About page.
I feel that the text is a bit too close to the image, I would just add a bit more empty space, a bit more separation – visually – between the text and the image.
And that would look something like this:
Rows of text that are more narrow anyway are easier to read, because once you finish a row of text at the end and you need to jump back to the following row of text, it’s easier to do that if the whole block of text is narrow, if it doesn’t span the full width of the page.
So that extra empty space that we added on the right helps with this.
Now there are a few other tweaks I would make to improve the look of such a page. Right now, even if we improved the typography, the text is still very hard to read, because, except the fact that it’s in latin :-), it’s because you have big big blocks of text, big paragraphs.
And for readability, we should try to break things down into smaller paragraphs just to have a break in between. Nobody would have the patience to sit and read through this bio, just because it’s so boring to look at visually because of the long blocks of text.
So I’m going to now do a few code changes, to improve the situation, and then I’ll be back to comment once it’s done. [see video]
All right, here’s how the page looks now with two changes inside the code, that you can do in your page builder.
I’ve broken the text down into smaller paragraphs. I just introduced new lines, and broke the text down. It’s the exact same text, but it’s easier to read because there are more spaces between paragraphs.
It’s no longer 2 big chunks of text, you now have 7 smaller paragraphs in total.
And the other change I did is to make the headings more prominent. I made them larger.
There used to be only one bold text at the top of the page, which was small, and I turned that into an H1 heading, so it’s larger, it’s better for SEO too, and it looks bold.
And then, I introduced a smaller H2 heading in the middle of the page, like a subtitle, a sub-heading. It looks smaller, and it just breaks the page even further visually as well, and it tells the readers that the next section is about that specific sub-topic.
So it just sets the hierarchy of the page, in terms of content. That’s what Google is also looking about, and it helps generally to improve the page design.
Overall, the page is now in much better shape.
I have a few other tips in mind, which would be to always try to limit the number of different fonts and formatting settings that you have on a page because it starts too busy very quickly.
If you’re using a certain font face for one paragraph, and then a different one for another. Or if you’re over-using bold text and then some italic text here and there, and then bold again, the page then starts becoming too “decorative”, too busy.
Try to keep things as simple as possible. Limit the number of font faces per page to a maximum of 2. You could have a comfortable body copy font face, that’s easy to read, and then maybe a different font face for the headings.
It could be in a different style so it stands out.
But no more than that. There’s usually no reason to have more font faces on the page. And then limit the amount of bold and italic usage throughout the page.
And the other tip is consistency.
Whatever font decisions you make, they need to be applied throughout the website, not just on a particular page.
You can’t have a page with good typography and then the rest of the site does things worse. You need to apply all the typography improvements throughout your website. You usually do that in the theme/template options for your site. You should have a typography section there where you can control most of these aspects.
OK, so that does it for the page.
If we compare now to the original, which is how this looked…
You can see it’s night-and-day now, and it’s a much better user-experience. The readability is much improved.
I hope you got something out of this on how you can improve the typography on your own photography website.
