Typography, the study of fonts and the way letters are designed has long been pivotal in providing readers with easy reading experiences. 

(Okay, yes, I am a typography nerd.)

Best practices for choosing fonts for your website

I always recommend hiring a designer if you can afford one, even if just for your logo. If you’re in a situation where you have to choose a font, here are the most basic categories of fonts to choose from:  

A quick crash course on typefaces 

• Serif — Latin for the word “foot,” these fonts have “feet.” These are great for headlines or body text and logos, too. With higher screen quality these days, you don’t have to worry as much about these appearing pixelated when used at smaller sizes. Examples: Georgia, Times, Courier, Garamond. 
• Sans Serif — These fonts tend to be more modern looking, as they don’t have the “feet” of serifs. (“Sans” means without!) They’re great for most uses online, from logos (hello, look at ours!) to headlines to body text. Examples: Arial, Tahoma, Verdana 
• Script — Cursive, handwriting, whatever you want to call them. Examples: Brush Script, Comic Sans. 
• Display — These fonts are everything else, pretty much. They’re the fun ones that don’t fit into the other categories, but they can be great for logos. Scripts can also fall into this category as they can sometimes be less readable. Use with caution but know that there are usually some fun ones in this area! 

Choose a combination of fonts

When designing your website or brand, it’s a good idea to stick to only a few fonts. For example, at Mediavine, our brand consists of two fonts (a serif and a sans serif), which we use on everything we make. We will pull out other fonts for emphasis only on special occasions, such as a social post or an event logo. 

Utilizing the different weights of your typeface is a good way to provide variety without overdoing it. Weights are the various thicknesses available within a typeface, such as thin, light, Roman, bold, extra bold, etc. 

Keep accessibility top of mind

Back in the letterpress days, typesetters chose individual typefaces and letters and manually spaced them out to best suit the reader and the final output. Now, we can code these choices right into our websites, but many of the same best practices still abide. 

Website accessibility is a big talking point these days, and for good reason: What’s the point of publishing all that wonderful content if a percentage of readers can’t see it? 

For people with any kind of visual impairments, making sure all the text on your site is readable and legible is a huge part of being a good internet citizen. Here are a few tips: 

• Body copy should have a line height and font size set to a comfortable level for all readers. (Bonus: This is great for RPM and above the fold SEO too!) 
• Hyperlinks especially should at least be underlined and in a text color that is accessible, like blue. The idea is that a user should easily be able to tell when text provides a hyperlink. (Check out six ways to make your site more accessible for some examples!)
• Any font you are using should have contrast against the background. Fonts with thin lines and narrow details can be hard to read, so you might opt for a thicker weight. For example, Raleway is a font commonly used for body copy, but some of the thinner weights can be hard to read at smaller body copy sizes.   
• When it comes to text colors, avoid using solid black (#000000). Solid black is the absence of light, so it stops light emitting from the screen and puts strain on the eyes as they adapt. Instead, opt for a dark gray such as #444444. 
• Page titles and headings should be distinct from the body copy so they stand out for ease of reading. 
• Though it may be tempting to adjust the fonts used in your site’s navigational features (like the navigation, sidebar and footer) to keep the focus on your content, keep in mind those areas should have fonts clear enough for a reader to find, read and click. 

Pagespeed is paramount

Unfortunately for designers who could nerd out about fonts for hours, fonts aren’t always the best for pagespeed. And what do users, search engines and social media sites all care about?

Pagespeed. 

Alas, fonts are an area of your brand that you may end up compromising for the sake of speed.

But you do have a few options when it comes to this compromise:

1. Stick to web-safe fonts 

Web-safe fonts are the fastest option because the browser and website aren’t loading any extra files. This can be accomplished via some quick CSS or, if you’re using Trellis, in the Trellis settings.

This is the method we use on our owned-and-operated site, The Hollywood Gossip, which we mention in our case study on how The Hollywood Gossip passed Core Web Vitals.

2. Self-host fonts

With this approach, you can load the fonts into your theme directly, but there is a chance for some slowdown. Chrome and other browsers introduced font fallbacks, but when that fallback font is swapped with your Google Font, cumulative layout shift can occur.

No bueno. 

3. Configure the CSS ‘font-display’ instruction 

This method is a bit more technical, so I’m going to let our Product team take this one: 

4. Install a third-party font 

You can install a font through a service like Google Fonts or Adobe Fonts, but it also means your website can’t show any text until that font loads, so do so at your own risk of not passing Core Web Vitals.

This is definitely our least favorite option. 

But what about my branding? 

Believe me, it hurts my designer soul that some of my favorite fonts aren’t available as web-safe fonts. And it begs the question, why would Google provide web fonts and then ding us for using them? 

But I have faith that the industry will catch up and give us more choices — eventually. In fact, there are new browser capabilities in development that will provide more options to balance performance and font selection. 

My favorite part of being a designer is coming up with creative solutions to difficult problems, so I say there’s still a way you can maintain a branded look without compromising speed: 

Incorporate the non-web-safe font of your choice into your logo or any images you have on your website while still using a web-safe font for text.

Use your favorite design tool to make branded images with the fonts of your choosing, all while keeping your site speed-focused with web-safe fonts. 

And don’t fret — much to any designer’s chagrin, probably no one but you will notice that you make changes to your typefaces. Web-safe fonts are so ubiquitous, most people won’t think twice about seeing them. 

The post How to Choose Fonts for Site Speed and Accessibility appeared first on Mediavine.

We’ve added what we’re calling Skip to Recipe and Skip to Instructions support for screen readers.

In terms more commonly used in the accessibility world, we added an additional skip link, or bypass block, to take readers straight to the recipe.

In all likelihood, only visually impaired readers will enable the screen reader, but making sites accessible to all readers is increasingly important on today’s web.

Why is Accessibility so Important?

Despite the recent Gil. v. Winn Dixie ruling, accessibility for visually impaired readers is still extremely important. 

Over 250 million people are visually impaired worldwide, or 3-4 percent of the planet. If you don’t make your website accessible to those individuals, it becomes virtually unusable to a larger segment of the population than you might think.

We always recommend publishers try enabling the screen reader that’s built in to your operating system. (They’re generally under system settings). 

Try browsing your own site and getting to your recipe / how-to card. Then imagine having to experience the entire web that way. 

Chances are without features like we’ve just described — and launched across the Mediavine community — it’s an absolutely terrible experience.

The screen reader literally reads the screen — as in every link and piece of content on it — in order to help readers find the section of content they want. 

What you may think of as quick scrolling becomes a nearly impossible journey for the visually impaired.

Enter our version of the bypass block, or skip links.

What is a Bypass Block? Do I Need One?

A bypass block is a pattern used to solve for large blocks of text or navigation that readers will want to bypass or skip past. It’s part of what’s known as WCAG Level 2 A, or what the W3C considers the minimum for making your site more accessible.

One of the most notable proposed solutions by the W3C is to insert a link at the top of the page that links directly to your content.

If you’re running Trellis, well, we’ve got you covered.

Trellis adds this link to your main content automatically for you. Trellis is built with page speed, SEO, advertising best practices and accessibility in mind.

What About Skip-to-Recipe Accessibility?

Readers who want to skip directly to the recipe, or how-to instructions, are something we’re all familiar with. Visual impairment or not, this is a popular feature.

Now, beginning with Create 1.6.7, Mediavine automatically adds this link directly to the recipe or instructions card alongside the link to the content.

The W3C also encourages publishers to link to multiple sections and not just the main content. For example, it suggests providing a jump directly to the navigation, content, footer, etc. 

When you have a website such as a food blog, an arts and crafts guide, etc, you can naturally see where these links could be just as important.

What is the User Experience Like?

The nice thing is, if you don’t have a screen reader enabled, this button will be hidden and the user experience will remain unchanged.

As we mentioned earlier, you can “see” what this looks like if you enable the screen reader function of your operating system. 

With a screen reader enabled, it adds a “Skip to Recipe” or “Skip to Instructions” button to the top left corner of the page that the screen reader will read to the user immediately.

This makes for strong accessibility and makes it very easy for users with visual impairments to bypass all your navigation and any content they want to.

Bottom line: Readers who need this feature can be cooking or crafting within seconds rather than minutes — or growing impatient and giving up altogether. 

It’s a much, much better experience.

Is this Feature SEO Friendly?

We would never lead you astray in this regard. 

Google hasn’t directly discussed accessibility and its impact on SEO, but we’re confident that when following best practices, an accessible site is also an SEO-friendly one.

In fact, most of the accepted best practices when it comes to accessibility are also listed or recommended as SEO best practices by Google itself.

Much of our SEO guidance — like using alt text for images or increasing font size — helps you attain accessibility goals as well, according to Google’s direct advice.

It’s a safe bet that making your site more accessible will help with SEO as well. If you need more evidence, Google uses this bypass block / skip links in Google Search itself.

Again, while the impact of a bypass block is never directly stated by Google, it is embraced by the W3C and Google itself. You can be confident that it adheres to SEO best practices.

Should I Still use a Jump to Recipe / How-To button?

A quick reminder of what we’re talking about here: The Skip to Recipe and Skip to Instructions links only appear for users with a screen reader enabled. 

If you want to offer the traditional Jump to Recipe or Instructions experience to the rest of your readers, you will still need to add the button.

Jump to Recipe can provide a terrific (and popular) user experience for readers who want to skip past your content, as we said earlier.

Just remember that this feature, should you choose to provide it, must be handled separately for the visually impaired vs. the majority of your readers.

With Create, Mediavine proudly offers the first recipe card to solve for both. 

Now, publishers can be accessibility compliant, provide a better experience for all readers, and maximize their ad earnings thanks to technology like our arrival unit.

The post Create: Skip to Recipe Accessibility For Screen Readers is Live! appeared first on Mediavine.

On April 7, 2021, the Eleventh Circuit, in a case called Gil. v. Winn Dixie Stores, handed down a very significant ruling in the string of accessibility cases that impact website owners. The court held that websites are not covered as places of public accommodation under Title III of the Americans with Disabilities Act (“ADA”).

Big News.

As nonlawyers, I imagine right now you are probably thinking, “what on earth does that mean and why should I even care?” Hold on, I promise we are getting there.

In this case, it means that the Court found that the defendant, Winn-Dixie (a chain of supermarkets), did not violate the ADA because its website was not accessible to the plaintiff, who is legally blind.

Many of us reading this may have a strong reaction to such a ruling, because as website owners, we may feel that it is our responsibility to create accessible websites.

In order to better understand this, let me provide you with some background.

The ADA requires that people with disabilities have equal access to goods and services provided in any place of public accommodation. To define the term “place of public accommodation,” the ADA provides examples of physical locations, such as schools, restaurants, stores and hotels.

Since President Bush signed the ADA into law in 1990, the text of the law does not mention websites in the definition of places of public accommodation because websites weren’t a thing back then. In fact, the first website didn’t appear until the following year. (Fun fact!)

Unfortunately, the law has not yet caught up to the digital age and the definition of “a place of public accommodation” has not changed, despite so much of our lives being lived out online.

In order to make the web a more inclusive place for all individuals, lawyers began to file lawsuits against website owners arguing that websites should be considered places of public accommodation under the ADA.

There is also a set of guidelines to inform website owners on how to provide an accessible website called the Web Content Accessibility Guidelines, or WCAG for short, that is widely known as the gold standard for accessibility.

Despite the fact that the text of the ADA does not mention websites in any manner, many other courts (i.e. not the Eleventh Circuit) have found that websites, in certain instances, are places of public accommodation under Title III of the ADA. Therefore, under these court rulings, website owners must make their websites accessible.

In fact, many of us have known website owners who have been served demand letters or been sued for failing to make their website accessible under the ADA.

So, you are probably wondering — what on earth do I do now?

The courts are split; Congress hasn’t done anything, and I really want to avoid that dreaded lawsuit.

We believe it is a best practice to follow the WCAG 2.1 Levels A and AA. There is no doubt that the plaintiff will appeal the Gil decision to the Supreme Court.

If the Supreme Court agrees to hear the case, we may finally have some clarity. In the meantime, two members of Congress have introduced a new law, the Online Accessibility Act, which, if passed, would bring websites under the scope of the ADA.

Until that time, though, get to know WCAG, update your websites (alt text is a good place to start) and feel pretty great that you have an accessible website.

Jamie Lieberman, owner and founder of Hashtag Legal has been a practicing lawyer for 15 years. As an experienced entrepreneur, Jamie understands the unique needs of business owners at different stages in their organization’s growth. Today, she partners with clients across verticals including influencer marketing, creative services and e-commerce. She has a deep commitment to making legal accessible and regularly speaks about legal matters, the art of negotiation and entrepreneurial topics at leading industry events such as Alt Summit, Podcast Movement and FinCon, and as an expert source for media outlets like Digiday and Forbes. She also offers courses teaching legal basics through the (un) business school.

Don’t miss our conversation with Jamie all about accessibility guidelines.

The post The Latest Web Accessibility Case And Why It Matters appeared first on Mediavine.

I quickly learned that this is only partially correct.

(more…)

The post What is Website Accessibility? appeared first on Mediavine.