Compare fonts for use on your website

Will the fonts that you chose for your website appear as you expect them to when viewed on someone else's computer? This is another one of those tiny things that can make a big difference when evaluating the accessibility of your website.

We put together a font comparison table on our accessibility page back when we first made this site. We wanted to show examples of readable and unreadable onscreen fonts to demonstrate the importance of font readability. Now we put the pages into their own blog post for easier sharing.

The first table of font readability comparisons is text-only. Note that fonts that aren't installed on your computer will be shown as the default font that you've set for your computer. For those of you who don't have all the fonts installed on your computer, the second table is a graphic version of the same table made from screen-capture images to show what the actual fonts look like if they were installed on your computer and how they will look on a user's computer who does have them installed.

Font readability comparisons as text-only

Note:  All fonts in the table are the same font-weight setting and proportional font-size (96%).

Font Readability Comparisons

Table contents

The first column shows clear onscreen fonts and the second column shows fonts that are hard to read onscreen.

Clear Onscreen Readable Fonts Hard to Read Onscreen Fonts
Montserrat
The quick brown fox jumps over the lazy dog.
1234567890,
!@#$%&*()+-";:?/<>’ ®™©=^äéëïöüñ~±
Baskerville
The quick brown fox jumps over the lazy dog.
1234567890,
!@#$%&*()+-";:?/<>’ ®™©=^äéëïöüñ~±
Open Sans
The quick brown fox jumps over the lazy dog.
1234567890,
!@#$%&*()+-";:?/<>’ ®™©=^äéëïöüñ~±
Minion Pro
The quick brown fox jumps over the lazy dog.
1234567890,
!@#$%&*()+-";:?/<>’ ®™©=^äéëïöüñ~±
LeagueGothic
The quick brown fox jumps over the lazy dog.
1234567890,
!@#$%&*()+-";:?/<>’ ®™©=^äéëïöüñ~±
Copperplate
The quick brown fox jumps over the lazy dog.
1234567890,
!@#$%&*()+-";:?/<>’ ®™©=^äéëïöüñ~±
Helvetica
The quick brown fox jumps over the lazy dog.
1234567890,
!@#$%&*()+-";:?/<>’ ®™©=^äéëïöüñ~±
Garamond
The quick brown fox jumps over the lazy dog.
1234567890,
!@#$%&*()+-";:?/<>’ ®™©=^äéëïöüñ~±
Helvetica Neue
The quick brown fox jumps over the lazy dog.
1234567890,
!@#$%&*()+-";:?/<>’ ®™©=^äéëïöüñ~±
Times
The quick brown fox jumps over the lazy dog.
1234567890,
!@#$%&*()+-";:?/<>’ ®™©=^äéëïöüñ~±
Trebuchet MS
The quick brown fox jumps over the lazy dog.
1234567890,
!@#$%&*()+-";:?/<>’ ®™©=^äéëïöüñ~±
Times New Roman
The quick brown fox jumps over the lazy dog.
1234567890,
!@#$%&*()+-";:?/<>’ ®™©=^äéëïöüñ~±
Verdana
The quick brown fox jumps over the lazy dog.
1234567890,
!@#$%&*()+-";:?/<>’ ®™©=^äéëïöüñ~±
New York
The quick brown fox jumps over the lazy dog.
1234567890,
!@#$%&*()+-";:?/<>’ ®™©=^äéëïöüñ~±
Comic Sans MS (good for dyslexic users)
The quick brown fox jumps over the lazy dog.
1234567890,
!@#$%&*()+-";:?/<>’ ®™©=^äéëïöüñ~±
Monotype Corsiva
The quick brown fox jumps over the lazy dog.
1234567890,
!@#$%&*()+-";:?/<>’ ®™©=^äéëïöüñ~±
Lucida Sans
The quick brown fox jumps over the lazy dog.
1234567890,
!@#$%&*()+-";:?/<>’ ®™©=^äéëïöüñ~±
Book Antiqua / Palatino
The quick brown fox jumps over the lazy dog.
1234567890,
!@#$%&*()+-";:?/<>’ ®™©=^äéëïöüñ~±
Lucida Grande
The quick brown fox jumps over the lazy dog.
1234567890,
!@#$%&*()+-";:?/<>’ ®™©=^äéëïöüñ~±
Futura
The quick brown fox jumps over the lazy dog.
1234567890,
!@#$%&*()+-";:?/<>’ ®™©=^äéëïöüñ~±
Chalkboard
The quick brown fox jumps over the lazy dog.
1234567890,
!@#$%&*()+-";:?/<>’ ®™©=^äéëïöüñ~±
Impact
The quick brown fox jumps over the lazy dog.
1234567890,
!@#$%&*()+-";:?/<>’ ®™©=^äéëïöüñ~±
Sans-Serif
The quick brown fox jumps over the lazy dog.
1234567890,
!@#$%&*()+-";:?/<>’ ®™©=^äéëïöüñ~±
Serif
The quick brown fox jumps over the lazy dog.
1234567890,
!@#$%&*()+-";:?/<>’ ®™©=^äéëïöüñ~±
Arial
The quick brown fox jumps over the lazy dog.
1234567890,
!@#$%&*()+-";:?/<>’ ®™©=^äéëïöüñ~±
Bookman Old Style
The quick brown fox jumps over the lazy dog.
1234567890,
!@#$%&*()+-";:?/<>’ ®™©=^äéëïöüñ~±
Univers
The quick brown fox jumps over the lazy dog.
1234567890,
!@#$%&*()+-";:?/<>’ ®™©=^äéëïöüñ~±
Bodoni BT
The quick brown fox jumps over the lazy dog.
1234567890,
!@#$%&*()+-";:?/<>’ ®™©=^äéëïöüñ~±
Georgia
The quick brown fox jumps over the lazy dog.
1234567890,
!@#$%&*()+-";:?/<>’ ®™©=^äéëïöüñ~±
Century Schoolbook
The quick brown fox jumps over the lazy dog.
1234567890,
!@#$%&*()+-";:?/<>’ ®™©=^äéëïöüñ~±
Andale Mono
The quick brown fox jumps over the lazy dog.
1234567890,
!@#$%&*()+-";:?/<>’ ®™©=^äéëïöüñ~±
Monospace
The quick brown fox jumps over the lazy dog.
1234567890,
!@#$%&*()+-";:?/<>’ ®™©=^äéëïöüñ~±
Tahoma (monospace font)
The quick brown fox jumps over the lazy dog.
1234567890,
!@#$%&*()+-";:?/<>’ ®™©=^äéëïöüñ~±
Courier (monospace font)
The quick brown fox jumps over the lazy dog.
1234567890,
!@#$%&*()+-";:?/<>’ ®™©=^äéëïöüñ~±
Monaco (monospace font)
The quick brown fox jumps over the lazy dog.
1234567890,
!@#$%&*()+-";:?/<>’ ®™©=^äéëïöüñ~±
Courier New (monospace font)
The quick brown fox jumps over the lazy dog.
1234567890,
!@#$%&*()+-";:?/<>’ ®™©=^äéëïöüñ~±

Font Readability Comparisons in a Graphic of Font Screen Captures

Note:  All fonts in the table are the same font-weight setting and proportional font-size (96%).

Graphic for updated (Feb. 2016) font comparison table

More Information About Fonts and Font Sizes

For additional information, check out the following links:

If you have additional tips and tricks for good readable fonts on the web, share them in the comments.


You Can’t Win Them All

[Guest post by Mike Murray, originally published on the Accessibility SIG blog in 2014]

But fear of failure is not an option

Photo of Mike Murray
Mike Murray

It’s 5:00 in the morning on September 7, 2014. I haven’t been able to sleep, and I suspect that’s for two reasons. Leg cramps are one of my symptoms of Parkinson’s disease (PD) [sic], and at 2:00 this afternoon I will be attending the funeral of a dear friend (I’ll call him Thomas) who was diagnosed as having PD 22 years ago.

Before continuing, I feel the need to make an important point. In spite of obituaries, articles, news programs, movies, etc. that would have you believe otherwise, PD is not fatal; however, the Center for Disease Control rated complications from the disease as the 14th top cause of death in the United States. There is no cure for PD, but it is treatable, and, again, it is not fatal.

I had been thinking about Thomas for several weeks and finally decided to call him. Looking back, I think fear of what I might find led to my procrastination. Seconds later I was listening to a stuttering, monotone, recorded voice saying, “The number you have dialed is no longer in service.” To shorten this story a wee bit, a wonderful lady at the high school (we’ll call her Claire) where my friend had worked did some searching and found that Thomas had been placed in a nursing home and then moved to a hospice facility. The following weekend, my wife took me to see him. When our eyes met, I could tell he recognized me.

Symptoms

I have read and personally observed that seemingly no two people with Parkinson’s exhibit the same symptoms. (There are many.) My friend’s most obvious symptoms were shaking, stiffness, general weakness, and difficulty speaking. His speech volume was very low, which doesn’t fit well with my deteriorating hearing. I wanted to ask him so many things, but I simply could not hear his responses.

On my next visit, I brought along an inexpensive amplification device that I use to hear the television. All Thomas had to do was speak into the microphone while I wore the headphones. Unfortunately, he could only hold the microphone close to his mouth for a few seconds at a time and pulled away any time someone tried to hold it for him. I could tell that he was deteriorating cognitively (i.e., mental processes). I could also sense that he was giving up. He no longer wanted to live.

The Perfect Solution

Not being one who gives up easily. I scoured the Internet and found what I felt was the perfect solution – a powerful amplifier with speaker. A headset would position the microphone close to Thomas’s mouth so he wouldn’t have to hold it. In order to pay for the 100-dollar unit, Claire contacted several of Thomas’ friends at the school who quickly came up with the money to pay for the amplifier. She ordered the unit, which only took three days to arrive at my house.

Not wanting to wait until Saturday so my wife could take me, I excitedly made arrangements to be picked up by an access-equipped bus and was at the hospice facility just before noon on the following day. I found Thomas sitting in a wheelchair in a hallway next to his room. As I approached him, he gave no indication that he knew me, but the thing that mattered was that I knew him. I put on my biggest smile, greeted him, and put my arm around his shoulders. I could feel him trying to pull away, but I was persistent. I talked with him about how we first met and some of the good times we have had together.

I explained to Thomas how the amplifier was used and demonstrated it on myself. But when I tried to place the headset on his head, he quickly recoiled and put both of his arms in front of his head in a defensive position. I was shocked at the same time my heart sank. I was too late.

Over the next few days, Claire visited and tried to get Thomas to use the amplifier. She said he left the headset on one time for about five minutes and that “it worked perfectly.” Stressful situations amplify my Parkinson’s symptoms, so it was almost two weeks before I could face my dear friend again. But before I could get there for one last hug, Claire distributed an announcement that he had passed away.

As I sat in my power chair at the cemetery, dark clouds fittingly rolled in and began soaking everybody. I learned a long time ago to “feel my feelings” so that I can let them go. I did that in the car with my wife.

Lesson Learned

I thought for a very long time about calling Thomas, but I kept putting it off. Just as you would do for a malady of your own, counsel your friends about seeing a medical professional as quickly as possible. Trust your instincts. The sooner you are treated, the more likely it is that your malady can be slowed down or corrected.

Epilogue

As my wife and I sat in our car, both completely drenched from the now heavy downpour, she started the car and turned on the heater. At that moment, I realized that we were shaking from the cold rain, but I didn’t feel cold. Instead, I was filled with warm thoughts. I felt grateful for the wildlife that remained happy and healthy. I felt grateful for Central Florida’s many pristine lakes looking even more beautiful now with their new supply of “liquid sunshine.”

“Ready to go?” I barely heard my wife’s question, but managed a head nod. Mentally, I was no longer in the car. I was at the school’s football stadium, and Thomas was walking toward me with his hand extended and a smile on his face. “Hi there, Michael!”

Dr. Seuss once said, “Don’t cry because it’s over, smile because it happened.”

I’m smiling.

Mike

For more information about Parkinson's Disease, see https://accessible-techcomm.org/parkinsons-disease/.