Avoid center-aligned or justified paragraphs

Hot Tip #07 is to avoid center-aligned or justified paragraph text.

When applied to long paragraphs, these two alignments can be difficult to read. This can result in fatigue while browsing Landing Pages with a lot of content.

Let Neil deGrasse Tyson take us through it:

—

🚫 Center-aligned

We think scientific literacy flows out of how many science facts can you recite rather than how was your brain wired for thinking. And it’s the brain wiring that I’m more interested in rather than the facts that come out of the curriculum or the lesson plan that’s been proposed.

✅ Left-aligned

We think scientific literacy flows out of how many science facts can you recite rather than how was your brain wired for thinking. And it’s the brain wiring that I’m more interested in rather than the facts that come out of the curriculum or the lesson plan that’s been proposed.

—

🚫 Justified

You have people who believe they are scientifically literate but, in fact, are not. And I don’t mind if you’re not scientifically literate, but just admit that to yourself, so that you’ll know, and perhaps you can take a first step to try to eradicate that. You have people who believe they are scientifically literate but, in fact, are not. And I don’t mind if you’re not scientifically literate, but just admit that to yourself, so that you’ll know, and perhaps you can take a first step to try to eradicate that.

✅ Left-aligned

You have people who believe they are scientifically literate but, in fact, are not. And I don’t mind if you’re not scientifically literate, but just admit that to yourself, so that you’ll know, and perhaps you can take a first step to try to eradicate that. You have people who believe they are scientifically literate but, in fact, are not. And I don’t mind if you’re not scientifically literate, but just admit that to yourself, so that you’ll know, and perhaps you can take a first step to try to eradicate that.

—

A good rule-of-thumb is that any paragraph with more than two lines should be left- or right-aligned.

Rags, Widows & Orphans – Kinda inappropriate naming but a good read on certain paragraph shapes and styles to avoid.

#26 - Decluttering Tips, Development Tips

Use fewer fonts

Hot Tip #26 is to use fewer fonts.

Multiple typefaces, each with a number of weights, add unnecessary load time to a Landing Page.

Consider pairing your primary typeface with a native system font to keep it lean.

A fast-loading Landing Page with a more organized typeset is classy and considerate.

System Font Stacks – Good breakdown with code snippets by Geoff Graham on CSS-Tricks.
Typewolf – My go-to for typography inspiration. Jeremiah Shoaf has done a fantastic job with the resource.
40 Best Google Fonts – Quality curation by Typewolf with font previews and direct download links.

#44 - Design Tips

Tighten your big type

Hot Tip #44 is to tighten your big typography.

Font Kerning and Tracking is a tricky subject as not all typefaces need it. That said, it’s a good idea to experiment with your bigger fonts.

Kerning is adjusting the space between 2 letters in a word. Tracking is adjusting the space between all the letters in the word.

Here is a Font Tracking example:

Tracking demo

Reducing the spacing between characters in your big intro copy can really tighten your Landing Page design.

Leading vs Kerning vs Tracking – Decent article on Creative Market showcasing the differences between Leading, Kerning and Tracking.
10 Kerning Tips – An older but solid piece by Rebecca Creger with 10 kerning tips for improving your typography.

#69 - Checkout Tips, Development Tips, Optimization Tips, UX Tips

Make it accessible

Hot Tip #69 is to make it accessible.

Providing people with health conditions or impairments, the ability to read and navigate your Landing Page easily is the right thing to do.

Here are five small tasks that can go a long way:

Create a clear :focus state like this – keep hitting tab on your keyboard and see what happens in your Landing Page.
Ensure your text color contrast isn’t weak – this text against this background – has a decent AAA accessibility score of 8.99.
Increase your browser font size and see if your Landing Page layout breaks or anything become illegible.
Correctly assign and order semantic headings (H1, H2, H3) – disabling your stylesheet or using a screen reader will quickly surface issues with your hierarchy.
Describe all your non-decorative images using the alt tag – if an image is only there for graphic purpose you can let the screen reader skip it.

One hour tackling the above, could saves hundreds of frustrating hours for others.

The exercise will also strengthen your Landing Page by surfacing fundamental development issues.

Chrome Lighthouse – Instructions how to run an accessibility audit for your Landing Page in Google Chrome.
Contrast for Mac – Great tool I use to to ensure my text colors are within Accessibility standards.
Accessible Color Generator – Useful to find the nearest accessible-passing color based on your color inputs (that are failing).
Focusing on Focus Styles – Solid article by Eric Bailey covering :focus and :active CSS selectors.
10 Screen Readers – A curated round-up by UsabilityGeek.
UserWay – A website accessibility solution for ADA & WCAG Compliance. Their widget sits in the corner of the browser where users can customize their browsing experience.