Accessibility in Web Typography

An Approachable Web: Typography for All

THIS paragraph has a lot of typographic elements to it. There is a drop cap, small capitals, text choices (both in font and style), and decisions about white space. A majority of these were created using HTML; some were automatically decided by my blog theme’s CSS. If I wanted to tweak them further, I would be able to do so—as long as I understood the basic coding involved.

For bloggers and online journalists, typography isn’t always the first thing on their mind. Content is, and always will be, king. For website developers, the need for responsive layouts and white space, and limiting the areas where users can “break the code,” is preferable. One of the biggest reasons designers do typographic adjustments in CSS is to keep content and design as separate as possible from each other. However, sometimes content creators need the ability to adjust layout in minor ways: poets for poetry, authors for long-form chapters, and instructors for mathematical formulas and HTML coding display.

Often the answer to these problems is to adjust the overall CSS of a website, but for those that share their content on a pre-determined, shared-user platform, this option often doesn’t exist (for security reasons)—or, as this essay will discuss—is inaccessible to the typical content creator. For example, if a creator wanted to have columns in the middle of their article, like I’ve done here, how would they go about doing so? If the creator was hosting their blog on a website like Blogger.com or WordPress.com, they could adjust the post’s unique HTML to create this effect.
However, they would need to know the code to do it. While there are various tools in the editor to justify or change the left margins for paragraphs in the toolbar, the more refined options for typography remain invisible, accessible only to those with the background to know how to do it, or those with knowledge enough to put the right keywords into their preferred search engine. Some sites, like WordPress.com, do provide a codex of acceptable HTML and shortcodes for their platform, but the general user is unlikely to know more than a handful.

 

For the purposes of this essay, I’ll be looking at the three platforms that corner the market on blogging: Blogger.com, WordPress.com, and Medium.com. While many articles often compare Medium to WordPress.org (a self-hosted framework), I find the comparison unfair: WordPress.org is a fully customizable site, with many plugins and CSS options, while this essay is focusing purely on “set” platforms with limitations for their free users (where the bulk of casual blogging takes place). To keep myself from having to write ‘.com’ after every mention of WordPress, I make the distinction now.

Visual Punctuation

“Typography is the balance and interplay of letterforms on the page—a verbal and visual equation that helps the reader understand the form and absorb the substance of the page content. Typography plays a dual role as both verbal and visual communication. When readers scan a page they are subconsciously aware of both functions: first they survey the overall graphic patterns of the page, and then they parse the language and read. Good typography establishes a visual hierarchy for rendering prose on the page by providing visual punctuation and graphic accents that help readers understand relations between prose and pictures, headlines and subordinate blocks of text.”1

Most writers aren’t coders. Especially when it comes to journal, poetry and fiction writers, coding language is often something they’ve had very little experience with, beyond the basic <i>, <b>, <u> tags. And code isn’t something that they should have to learn to be able to use a blogging interface. Code should be limited, and having users manually inserting code all the time can bloat the system and break a site’s uniformity. (It also increases the risk that as the site or coding language changes, older posts will cease to be compliant.) Authors and publishers should be able to focus on their content, without having to learn an entire markdown language to present it in a satisfying way.

A fancy pull quote can
draw
 someone’s attention
to
 information that might
otherwise be skimmed over.

Enter Medium.com, founded in 2012 with a mission to be one of the sleekest, cleanest places to blog on the web. Medium, at least for free users, is about as bare bones as you can get (it’s even stripped some of its original functionality in the last two years, like full-bleed images wrapped behind text). Coders rejoice! The interface is a marvel, perfect for endless scrolling and distraction-free writing. There are no widgets and ads materialize then disappear, marrying the ad-savvyness of Spotify with the intent of WordPress—but advertised as a place for “ideas” over 140-characters. It’s an interesting pitch, but why not call themselves the next WordPress or Blogger, when Medium is clearly a place for blogs?

It may have something to do with that leanness coming at a cost. For free users, Medium’s typography options are actually quite slim. Some options, like buttons for creating a drop cap and small capitals (as shown in my post here), are like candy for an author. Unfortunately, the typography options basically end there. There is no justifying text, changing the color, or your fonts. There’s not even an HTML editor. Specialty articles on Medium (submitted to Publications) are the only posts on the site with the bells and whistles, and those layout options are under lock and key—you have to get through the slush pile first. So the comparison Medium made for itself as “long-form Twitter” is pretty apt: It’s a place to scroll through text, preferably quickly. It’s a place where skimming is more likely, just like on Twitter, where users may prefer to get the gist of an article over getting absorbed in its content. Visual punctuation is farther apart than on sites like Blogger.com and WordPress.com, and authors have little control over it, except to insert ‘• • •’ between sections of their piece. Medium’s editor is highly approachable, but its typography is not fully accessible.

Yet, that doesn’t mean that Blogger and WordPress are more accessible to their users. Blogger, which was acquired by Google in 2003, has not had any major interface improvements since then (besides the adoption of HTTPS in 2015). If a user wishes to do any sort of customization at all (like change the default theme) they must know code, or at least be able to fake their way through a lot of copy + paste. Independently-developed themes are plentiful, but if you want to “install” them, it can be a process (click one to see why). In terms of accessibility, Blogger fails at the user level. It is still a powerful platform with millions of active users, and its editor, which has a familiar, “Word-like” layout, is effective. People like it. But it could be more. The notification system, while not the focus of this essay, is exactly the same for users as it is for non-users unless they have installed a G+ integration—but again, these alterations are inaccessible (or incomprehensible) to the basic user. As far as typography goes, anything beyond basic style hot keys must be known in advance. It is a platform built for people already comfortable with computers, and doesn’t try to be more inclusive on that front.

WordPress takes the more humanist approach. Templates are one-click install and customization, as well as the editor, work in nearly full-WYSIWYG. Still, as someone who has taught over seventy-five writers how to create a blog on WordPress, it’s not necessarily intuitive. And just like Blogger, WordPress limits how much typography can be adjusted with a simple click of a button. Both of these platforms, however, offer a lot of typographical elements that Medium doesn’t, such as pre-formatted text (for poetry and code), pull quotes, columns, click-and-drag image resizing, up to seven header options, page jumps, and even pagination. Some of these elements can’t be applied with a button, and that should change. The first step to making the typography on the web more accessible is to stop making it hidden.

A poem, with special indentation:

Books are a Uniquely Portable Magic

Pretend you are a book, 
   Being opened from time to time; 
      Your pages being flipped, 
  They tell a comic, story, or rhyme. 
  Satisfy your readers, and always get them hooked
  You can be anything, and today you are a book.

Written by Sydney Veazie on Apr 24, 2015

Do You Really Need All Those Gimmicks?

What makes an aspect of typography essential, and what makes it a gimmick? It could be argued that the only real necessities for web typography are the ability to italicize or turn a text oblique, and the ability to block quote a text that makes it clear at a glance that it is just a quote. But what about bolding text for keywording, or using pull quotes to emphasis an important point in a long paragraph? Are they essential?

The short answer is no. Strong content writers could likely get all of their points across with only the most basic of typographical choices, just as a the best web designers will always strive to slim down a site’s code.

The long
answer
is yes.

The long answer is yes. By its very nature, content is a creative process, and is constantly striving for ways to be “heard” in a deluge of similar content that is posted across the web every day. At the moment, articles fight for visibility through graphic elements, but most sites display images in the same way, and blogs aren’t necessarily the platform for image-heavy media. After all, blogs are about ideas. They are about communication between a (typically) like-minded set of people. Text is the fuel of blogging. So, shouldn’t text, therefore, be approachable and accessible for the basic content user?

Think of platforms like Instagram, wildly popular because it suddenly turned every phone into a virtual photography studio. The application of filters drives the app’s success. Customization in the hands of the consumer is a driving force behind many successful companies, like Google, Adobe, and Firefox, and could also be more of a force on the blogging web.

So what features should exist on sites like Medium, WordPress, and Blogger (in button form)?

  • Remove justification or consolidate the buttons to save space. Add in margin options:
    • 2-column (50/50 or 40/60) and wide margins for increased white space
  • Drop caps. Drop caps are a classic typographic standard.
  • Pull quotes. Code for this is complicated and imperfect. Platforms could use their site-wide CSS to make truly stunning pull quote styles, rather than the cobbled-together HTML I presented in this article.
  • Tables.
  • Post Templates. Many blogs have recurring series of content. Being able to save a template (not just copy a post) would ensure proper stylistic structures.
  • Indents (as a paragraph style). Especially for long-form fiction, scenes with lots of dialogue end up looking pretty choppy on a screen. Having the ability to have a soft return (no white space between paragraphs) and an indent would make fiction more readable online.
  • Footnotes (linkable). This one may be harder to achieve, but even offering a sup/superscript selection for text would go a long way to a more open, but researched web.

Typography for an Accessible Web

Ideally, a solution would be created where these common typographical elements were available right on the dashboard. StagTools, a plugin for WordPress.org, is an example of what regular, free interfaces could do to improve user experiences. Minimal and sleek design is good, but not at the cost of functionality (and there’s some logic that maybe people like cluttered interfaces more than we let on).

For content creators, some additional typography selections (especially pull quotes, which are important for journalism) could diminish the need for HTML tag memorization, but also keep the web developers happy, as less code would be written manually post-to-post. WordPress and Google could learn from Medium and Hypothesis’s take on commenting or taking notes “in the margins” of posts, rather than at the very end, allowing for contextual discourse on otherwise static blocks of text, which would then transform blogging (across the web) into the best version of itself: a true conversation of ideas. Medium’s decision to display reading time (like Longform) would also be a welcome addition to the rest of the blogging web. But when it comes to Typography, Medium could put more control back in the hands of their content creators, so at least those who wanted to design the experience around their writing could, without needing to depend on publications that might accept or reject their articles. (Self-publishing as an industry is only growing, and self-publishers have fought long and hard with every venue to have the same capabilities as the traditional presses.)

Typography exists to honor content. ~Robert Bringhurst

In closing, the key to an accessible web—not just a web that caters to those that know code or keyboard shortcuts—is to make typographic customizations visible right in the editor. This is already possible with self-hosted solutions, but why not for static platforms like Blogger, WordPress(.com) and Medium? Providing solutions for content creators that are not producing typical content is important, and particularly with poetry and fiction, they aren’t demographics to be ignored. Decisions on web design should be made with the understanding that a large majority of writers are still not coders, and the learning curve to merge those two skills are steep. Even though someone can’t code doesn’t mean they shouldn’t have the customization options available to visually “punctuate” their content in the way that best suits it.

Creative Commons License
This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.


1. Lynch, Patrick J., and Sarah Horton. Web Style Guide: Basic Design Principles for Creating Web Sites. New Haven Conn: Yale University Press, 2008.

For my regular readers, sorry for the dense article. I wrote this as an essay response to one of my master’s courses assignments: Write about the web and an area of publishing that matters to you. If you have any additional comments, I’d love to hear them!

Otherwise, here’s a timelapse of some pretty cool cloud cover I saw this week:

giphy

Skies Over Coquitlam

8 thoughts on “An Approachable Web: Typography for All

  1. shoreacres says:

    Yes, I read the whole thing, and it was interesting. My first foray into html came when I decided I wanted to match the color of the text on my blog to its color scheme, rather than using the default black. Hello, hex numbers. Then, I decided I wanted to increase the space between the end of each post and my little “Comments are welcome” tag. Hello, padding. And so on.

    I’d never heard of Medium, but I see they’re responsible for the abomination of “reading time.” When WordPress began appending reading time to posts in the Reader, I was among those who screamed bloody murder. According to WP, one of my poems had a reading time of 47 seconds. As another blogger said, it’s as though they’re expecting people to consume blocks of text, rather than engage with them.

    I also don’t like the idea of comments in the margins. I want someone to be able to read my entire piece without being distracted by other people’s thoughts. I suppose that’s an indication of a very old-fashioned view of the writer-reader relationship. On the other hand, I purposely left like buttons and avatars off my blog, in order to encourage commenting, and it’s worked rather well. I sometimes think there are as many people reading the comments as read my post –and that’s fine with me. I do see what I write as the jumping-off point: a beginning, not an end.

    Liked by 1 person

    • Ariel Hudnall [Alex Hurst] says:

      You make a great point about the commenting systems. I did go back and check Medium, and they moved all comments to the bottoms of posts (Hypothesis is an annotation tool specifically meant to annotate and have conversations around articles… I’m using it in one of my masters classes and the students use it to build discussions around the week’s readings, which generally have been richer because a lot of voices can all speak at “once” on the web; not so much in the classroom). Medium’s in-line comments are presumably now only for private use (so you can mark up essays and articles like you would with a highlighter and writing notes in the margins… purely for your own purposes.)

      Reading times are definitely something I’m on the fence with. I like when they add it for longer pieces, because sometimes I don’t have 38 minutes to get absorbed in an article (so I can save it for later)… but you’re right… at the seconds level, it does start to feel like the algorithm is maybe cheapening the idea of the content, basing an arbitrary “value” on a post right off the bat.

      Can I ask you why you turned “likes” off your posts? Your commenting system has always worked very well.

      Like

  2. TRISTA says:

    You know how The New Yorker includes little cartoons in an article? It’s randomly placed graphically and unrelated to the article. When I first started teaching, this confused students so much. They tried to read it as part of the article. All-cap words starting chapters confused them too; they thought they were supposed to yell the word. So, what you’re saying here makes so much sense. And I think traditional forms maybe don’t fit modern-day readers.

    Liked by 1 person

    • Ariel Hudnall [Alex Hurst] says:

      This is a really interesting example. Can I ask what age the students were? It’d be interesting to see if print typography is making less sense now to readers who get most of their text online…. I wonder if all embellishments are going to go the way of the illuminated letter~ (meanwhile, I’m trying to bring the illuminated letter back, lol.)

      Like

  3. jazzfeathers says:

    I’m a complete inept at coding, this must be the reason why I love WordPress and their innumerable plugins 😉
    Still, I’ve learned not to get scared of codes. Just to do little tweaking, but still.

    And I agree with you: the content is (and should be) kind, but sometimes the form of the content is also important. It’s a way to say things we are not wording 🙂

    Liked by 1 person

  4. ctiampo says:

    This is a really interesting topic to cover! And, maybe because I’m one of those writers who does know how to code, I found this very informative on what issues people might be having with their blogging platforms. I would, however, first like to mention that I’m interested in where you came to the conclusion that few writers know how to code, as most people I know have more than just a base knowledge of coding — although I suppose that’s probably just a question of what circles we each are involved in. I also think this number is steadily growing.

    Aside from that, I think you make a good point overall; web text editors really are pretty spare. I use Tumblr for most things, and it doesn’t have options for columns, tables, pull quotes, or many of the other things you mentioned. (As an aside, it does have an option to edit text using HTML, but as you said, that doesn’t really count as accessibility.)

    That said, I do question how many writers need most of these things. You made use in this article of a lot of the possibilities for web content, but I don’t know that many of them are useful on a large scale. Columns, for example, work in newsprint but on a webpage are usually clunky — even your usage here isn’t necessary — and can be very distracting to the reader (especially when the post width makes columns so narrow that only five or six words can appear on a line). Drop caps, too, are pretty but essentially pointless, except as a means to suggest section breaks, for which we have many other (arguably clearer) options, including, as you mentioned yourself, • • •.

    I’m also really interested in your assertion about self-publishers being stymied by a lack of typographical options. I suppose I’d never thought about it; my experience is that when I copy-paste a piece of writing from MS Word into a text editor, it usually creates the HTML that would be needed to effect all my elements. Of course, not everyone has MS Word, nor do many people do all their writing there before putting it into an online text editor, but I suppose your experience with it is less accessible. I wonder if that’s a difference between text-for-web versus MOBI and EPUB, or if it’s simply a site-by-site difference.

    When I saw the title of your article, I was expecting some discussion of how typography could make the web more accessible to readers. It would be really interesting to learn how typographical elements might foster accessibility (for example, the use of line spacing to allow easier reading by visually-impaired people, or the use of Comic Sans for dyslexic people), because I do think that there’s a lot of potential there, especially for publishers of long-form writing. We see it a little bit with e-books (Amazon changed fonts recently to one called Bookerly, which is touted as being more readable than others; there’s also the simple font size options) but I think there’s a lot of potential to use CSS, HTML, and eventually rich-text editors to increase accessibility for readers.

    Thanks so much for writing. This is a really fascinating topic and there are so many possibilities! PS: any chance you could add in some screenshots of what options are available on different text editors?

    Like

  5. jalperin says:

    I loved all the visual flourishes you’ve included in the article, not just because of the aesthetics, but because I felt that you used them to effectively illustrate how they can be used to add emphasis and enhance the reader’s understanding of your work. In some respects, you deliver this message more effectively through the visual representation (in a sort of meta-message) than with the writing itself.

    As I pointed out in my hypothes.is annotations, I found myself a little lost in your argument at times. I could see the individual pieces, but at points I lost sight of the whole.

    One notable absence in the work is how the use of standardized widgets for flourishes would remove the uniqueness of each of these—something you get with custom coding.

    Like

Leave a comment.

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s