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

Z is for Zephyr

Never has a word more mundane had such an amazing sound; a perfect lilt upon the lips as it is spoken. Zephyr, merely a gentle breeze, invokes a certain satisfaction, a certain contentedness in the world around us––a light and invigorating freedom in life.

So, I guess, it actually is aptly defined.

Today is the last day of the Blogging April A to Z Challenge, and I thought there would be no better way to conclude the event than to share with all of you some of the most amazing bloggers I’ve gotten to know over the last month. I didn’t ask anyone ahead of time if they would mind being mentioned, so if any of them want to be removed, feel free to let me know. So! For the last day of this challenge, and in the spirit of zephyr, I present to you my personal list of the 2014 Blogging April A-Z Challenge’s Must-Reads.

MUSTREADSaz2014
Graphic by Alex Hurst; free-use. Just link back to me so I can read yours!

As a rule, all of the following bloggers wrote such awesome posts that I didn’t want to miss a single one, and will be playing catch-up in May for the posts I didn’t get a chance to read this month.

I followed a LOT of blogs for this challenge––close to 300 of them. I didn’t get to all of them, obviously, but there were a lot of really awesome ones in there who unfortunately didn’t complete the challenge, so I’m not mentioning them here. However, Jelly-Side Up gets a mention anyway, because she’s simply amazing. (Seriously, check her out!) I’ll divide them by platform, since some blogs are easier to follow depending on what service you use.

WordPress Blogs

  • Bigger on the Inside: I absolutely adored this poetry blog. Kell was participating in National Poetry Writing Month (NaPoWriMo) concurrently with A-Z, so her theme was appropriately all of the different poetic forms, A-Z. Rather than just write the poems, Kell also included wonderful explanations for each form which helped me understand poetry a lot more. An absolute must-follow. Check out “Nonsense Verse” and “Iambs, and Other Metric Feet” for samples from her amazing month of poetry writing.
  • Caro Ness: Born in Jamaica, but now a resident of England, Caro Ness writes an incredibly wide range of accessible and fun poetry that sometimes takes dives into the more subdued. I loved her blog a lot, and I’m not a huge poetry person, so that should tell you something! My favorite posts of hers were “Let’s Go to a Hotel” and “Who’ll Stop the Rain?“.
  • Claire Gillian: Oh, I eagerly anticipated every post from Claire’s amazing series of parody romance covers and blurbs. She was one of the gems of the A-Z challenge I really would have liked to have seen get more notice. Filled with enough snark and wit to keep me following for a long time. Check out her posts “Panda Mine” and “The Lacemaker’s Husband” for samples of the genius she shared with us this month.
  • D Lonely Stoner: An amazing flash fiction writer, D Lonely Stoner had a strong month of fiction and poetry that I thoroughly enjoyed savoring. On her own bio, she quotes “Being the odd one out may have its temporary disadvantages, but more importantly, it has its permanent advantages.” Check out her posts “Yours Truly (poem)” and “Antithesis (fiction)” as starters.
  • Editorial Stand: You can never follow too many editors, and Editorial Stand is definitely one of the ones that stood out to me in the last month. The theme Laura took on was, unsurprisingly, editing and publishing, and I loved every post I read. Simple, easy-to-digest definitions of everything made this blog a pleasure to read and share with other writers. Check out her posts “E is for Editors” and “D is for Dashes“.
  • Ramblings | On | The | Wall: Another blogger that I would definitely count as a friend made from the challenge, even though she isn’t quite finished with the challenge yet, I couldn’t help mentioning her. Sam dresses up her posts with fun reaction gifs (which makes her blog pretty unique on WordPress), and in general has a lot of fun, interesting stuff to say. Be sure to check out “Word Porn Wednesday : Letter of the Day – T” and “P is for … Patience“!
  • Sayling Away: One of the most visually appealing blogs I followed during the challenge (it certainly kept me busy on Pinterest) was the series on classical artists curated by Noelle A. Granger (whose name doesn’t actually appear in her bio, but I found through one of her published works). Feast your eyes with these posts on W = Van der Weyden and U = Ucello.
  • Veronica Sicoe: A science fiction writer with a clean, fun blog, Veronica’s A-Z topic was all about, you guessed it, writing. But like I said, I followed over 300 blogs in the (WR) category of this challenge, and Veronica’s blog stood out. I liked her opinions about genre and creative ways of discussing common topics. Be sure to check out her posts For the love of SPACE OPERA and The flexible definition of LIFE.
  • WORDS from SONOBE: Probably my FAVORITE theme of the year, Words from Sonobe’s topic was “Letters to My Younger Self”, an inventive and intimate look at self-evaluation and all of the little trials and successes that make up one’s life. I hope this series eventually turns into a book. It was so wonderful. Here are a couple of her posts to get you started: Mired in a Mad Woman’s Madness and Lessons from Leaping.

Blogspot Blogs

  • Lexa Cain: Not much more needs to be said beyond Lexa Cain’s theme being “Hauntings”, but I’ll add that they were written so well that I got the creeps on several of the posts, and I’m the type of person who giggles during horror movies. Be sure to check out all of her posts from April, but here are a couple highlights: “Hauntings: Waverly Hills Sanatorium” and “Hauntings: La Laurie House“. Note: Her website does take a while to load sometimes, just so you know.
  • StrangePegs: The blog home of Andrew Leon, a wonderful author whom I used to blog with on Out of Print, a free fiction blog. I’ve been a long time reader of his blog, where he reviews movies and talks about writing. His theme this year was “Abandoned Places”. It was a thoroughly researched, thoroughly enjoyable series. My favorite two posts were “Abandoned Places: Shi Cheng, the Sunken City” and “Abandoned Places: Qasr el Baron“.
  • On Writing and Riding: This was a really awesome blog that not only discussed grammar and various other elements of writing, but also the many various horses the blog owner, GS Marlene, has owned in her lifetime. As a lover of horses, I couldn’t resist following her for the equestrian and educational updates. Well worth a follow. Here are some of her beauties: “Santana” and “Kit Kourageous“.

Custom Domain Blogs

  • Patricia Lynne (YA Author): Patricia was kind enough to visit my blog every day during the challenge, and even retweet my posts (THANK YOU!), but that doesn’t mean I’m simply favoring her. Patricia took on one of my favorite topics for A-Z 2014: Words. Basically every single post she made is going to eventually make it into my Dictionary of Purple Prose (in the tabs). Also, her Skittles avatar just made me happy. For whatever reason. An awesome lady; be sure to check out her awesome lexicon! Good places to start would be Nugatory, Seriatim, and Witzelsucht. She also contributes posts at Story Dam, which was in the challenge as well.

divider_big_transparent

That’s it! YAY! Finally! (Wow, this post took me over five hours to compile…) In any case, did you find any awesome blogs not mentioned here? How many new blogs did you find that you will keep following after this challenge?

If you want to make your own list of must-reads, feel free to steal the graphic above, and use the twitter hashtag #atozstars on Twitter so I can find you!

Thank you, everyone, for an awesome month!

Y is for Yggdrasil

Have you ever appropriated elements of the worlds’ mythologies without researching them first? When I was younger, usually one image was enough to inspire something in me, and so I would roll with it, without considering things like the origin myths (and how they might help me or make me further avoid the road I was heading down).

I’m going to assume that most of the readers on here have heard of Yggdrasil before, or have at least seen images of it. The giant ash tree that holds together the world. The tree that Odin called “noblest of all trees” before sacrificing himself upon it.

I didn’t. The very first picture of Yggdrasil that I ran across didn’t even look like a tree:

yggdrasil

The graph has inspired me several times for many stories (which is unfortunate, because when I play favorites on a theme, I really play favorites. Case in point: In 2013, 80% of my short stories dealt with death in some way).

I won’t go super into detail about everything its inspired me for, but it’s a good example among many. I borrow a lot of elements from non-European sources these days, mainly because I think elements of central European and Christian stories are overdone in fiction, but Yggdrasil is an interesting point for me.

I recently have decided I want to get up to speed on all of the Greek, Roman, and Norse mythologies that I skipped out on learning as a teenager (mainly because one of my favorite authors is writing a bunch of LGBT works in the Greek world of gods and goddesses and I have no idea what’s going on), so I looked up Yggdrasil.

Independently of the image above, I made a tree central to my plot in the stories influenced by the graph. Not only that, but I have the main, tragic antagonist run around with one eye missing. Sound familiar?

The_Sacrifice_of_Odin_by_Frølich_(vector).svg
Odin says: AAAAARGH.

It’s kinda cool, now that I think about it. It seems that there really are some tropes that are just ingrained into us, no matter what culture we come from.

If you’ve incorporated mythology into your work, what would you say surprised you, or helped you most from the experience?

Tomorrow: Z is Zephyr !

X is for Xueqin

My first semester at UC Berkeley, I took a literature course entitled “Dynamics of Romantic Core Values in East Asian Premodern Literature and Contemporary Film”. I’ve actually talked about it before, in my post Social Experiments.

One of the books we read in that class was Story of the Stone, or as it’s most commonly called, Dream of Red Chamber. The story was written by Cao Xueqin, and has easily become one of my favorite texts, even though I haven’t finished it yet (I’ll explain later).

Xueqin was a pretty amazing man, and he leaned on his life experiences to write this fanciful, dramatic tale in five volumes (or at least that is how Penguin divided them). As Betty Radice writes on the first page of Volume I:

Cao Xueqin was born into a family which for three generations held the office of Commissioner of Imperial Textiles in Nanking, a family so wealthy that they were able to entertain the Emperor Kangxi four times. But calamity overtook them and their property was confiscated. Cao Xueqin was living in poverty near Peking when he wrote his famous novel. []

The story is dense, with flowery descriptions out the wazoo, but this makes it an extremely important text for understanding life in Nanking during that time. While

Statue of Cao Xueqin
Statue of Cao Xueqin

sometimes you do have to plod through the fiftieth description of what the characters are wearing (remember: fabulously wealthy), the story’s heart is in its characters, whom I love intensely.

Xeuqin based many (perhaps nearly all) of his female characters on cousins or other relatives he knew in his life, and my favorite of all of them is Xi-feng. She is a precocious, firecracker of a teenager, who is married to an older man who simply can’t restrain her.

The story basically starts out with a lame Taoist and a monk in the Realm of the Fairies, and they talk about the things you would expect. There is also a moment when the Taoist finds a rejected piece of stone from Nüwa’s building of the world (an origin goddess in China), which he pockets for a journey. This stone eventually makes it into the realm of the fairy Disenchantment, and takes the form of a boy. The boy soon finds a beautiful Crimson Flower, and waters it with dew, until it comes to life as a girl. The girl, then and there, decides that the only way she will ever be able to repay the stone is to shed a lifetime of tears in his honor.

And so she is made to make good on the promise, and stone and girl are sent to the mortal, mundane world, where the majority of the story takes place.

There are literally hundreds of characters in this book, each with their own little plots and stories to tell, and I can say with fair certainty that even though I’ve only gotten to Volume II, I’m in love with each character. The only problem is that the satellite characters tend to die quite suddenly, and that makes me sad.

It also has that fun, old-style narration where the narrator often talks to the reader, which makes for some wonderful jokes and quips throughout the piece. There is also a healthy dose of fantastic poetry, as the characters are called on quite frequently to compose. The story takes itself as realism, even with the superstitions and fairies, and that is part of what makes it so great.

The only reason I haven’t finished it? I was told that if I thought the first volume was sad, I would find the later volumes extremely depressing. There is a prophecy of sorts that the main character stumbles on in the first volume which warns that the twelve women in his life are all destined for sad endings. I’ve been afraid to finish it! But… it’s on my reading list this year, so I’m going to get through it. I need to know what ends up happening to Bao-yu (the main character) and Xi-feng (not the Crimson Flower, but still my favorite)!

Interested? Buy it here.

Some art, depicting scenes from the novel:

Tomorrow: Y is Yggdrasil!

W is for Wonderland

“But I don’t want to go among mad people,” Alice remarked.
“Oh, you can’t help that,” said the Cat: “we’re all mad here. I’m mad. You’re mad.”
“How do you know I’m mad?” said Alice.
“You must be,” said the Cat, or you wouldn’t have come here.”
Lewis Carroll, Alice in Wonderland

 

I’m fairly certain that everyone who can read is familiar with Alice in Wonderland, the wonderful, strange tale by Lewis Carroll. It has been a beloved favorite of children, movies, TV shows and cartoons for many decades now.

But maybe you didn’t know that the story isn’t nonsense. It’s actually a huge allegory for mathematics, as outlined at the following blog. This makes me really happy, because it disproves that whole idea of science and humanities not being able to mix.

Besides for that awesome tidbit, Alice in Wonderland is also an extremely quotable book, with some of the greatest gems from literature to date. You can check out a lot of them on Goodreads.

Tomorrow: X is Xueqin!