TLDR: Compose heading content in natural title case, then use CSS to modify capitalization. Below, I explain why!

Understanding Capitalization

Before going any further, let's first define the different capitalization schemes. In this post I'm talking about natural language casing/capitalization, not code casing. Although I do love a good chat about snake_case vs. kebab-case vs. camelCase vs. PascalCase, that's for another day. As I understand it, these are the following forms of capitalization in the English language, and their corresponding CSS text-transform rules.

  • this is lower case // text-transform: 'lowercase'
  • THIS IS UPPER CASE // text-transform: 'uppercase'
  • This Is Title Case // text-transform: 'capitalize'
  • This is sentence case // possible using text-transform: 'capitalize' as a rule in the pseudoclass ::first-letter
  • This is Natural Title Case // no CSS rule exists currently

I'm not aware of a technical term for the last one, so I'm inventing "natural title case" out of need. The essential difference between natural title case and title case is that a collection of prepositions and articles are meant to be lower cased in natural title case (e.g. the, of, and, for, to). I'm not sure how far back this convention goes or why it became popular, but natural title case has been in the English language for a while, and in my opinion makes titles faster and easier to read.

Dealing with Capitalization

When writing headings for your website, it can be tough to decide how you want to capitalize your headings—or worse, you might change your mind 6 months down the road, and suddenly find yourself with hundreds or thousands of posts that need to be changed. Let's say all of your posts have been HARD CODED AS ALL CAPS and you want to change your headings to all lowercase or title case. Luckily, CSS text-transform would be able to bail you out in that scenario.

However, if you wanted to transition to natural title case, a capitalization scheme with no CSS text-transform, it would be pretty flipping annoying to re-process all that the content. I suppose it could be done as a batch process or at runtime, but either way you would need a script to apply title case to all headings except for words in a banned word dictionary of the right articles, prepositions, etc..

Transitioning to sentence case may seem easy enough, given it can be acheived with CSS. Depending on the type of content you manage, though, you could be in for a nasty surprise.

Coping with Accidentals

I'm not a linguist so I don't know the technical term for this. Instead, let's borrow a term from music theory. In western music theory, if you have a raised or lowered note, not normally found in that scale, the note is called an accidental. For instance: D♯ in the key of A minor, or C♭ in the key of F major.

In English we can find "accidentals" in our capitalization schemes in specific classes of words that have independent capitalization demands. A subset of the accidentals listed in the Purdue Owl capitalization help guide includes:

  • Proper nouns (people, places, landmarks, and assorted culturally important things)
  • Days of the week, but not seasons
  • Names of gods
  • Nationalities, languages, and assorted demographics
  • and more

If using the CSS text-transform for sentence case, these accidentals will be made lowercase. Some users might be able to feel that something is amiss. When I read philadelphia eagles or democratic national convention, all lowercase, I might not immediately catch on why it looks wrong, but it doesn't quite feel right. I can't imagine this would seriously impact my experience of a website or my ability to reach my goals as a user, but if you've made it this far in the post, I assume you either have an above-average fascination with language, have generalized anxiety, or manage a sizeable CMS for an organization that cares about details.

Who Cares?

Great question. Consider the following examples, which obey convention rules and accidentals,

  • Philadelphia Union to Sell Mark McKenzie to Belgium’s KRC Genk
  • Philadelphia Union To Sell Mark McKenzie To Belgium’s KRC Genk
  • Philadelphia Union to sell Mark McKenzie to Belgium’s Krc Genk
  1. Natural title case
  2. Title case with exceptions for accidentals
  3. Sentence case with exceptions for accidentals

The following examples have CSS text-transforms applied,

  • philadelphia union to sell mark mckenzie to belgium's krc genk
  • PHILADELPHIA UNION TO SELL MARK MCKENZIE TO BELGIUM'S KRC GENK
  • Philadelphia Union To Sell Mark Mckenzie To Belgium’s Krc Genk
  • Philadelphia union to sell mark mckenzie to belgium’s krc genk
  1. Lower case
  2. Upper case
  3. Title case
  4. Sentence case

If you're trying to transition to all lower case or all upper case, accidentals shouldn't make much of a perceptual difference, because the expectation is set that capitalization conventions aren't being followed in the title. If you're transitioning to sentence case, you will lose a fair amount of accidentals, and it probably won't look right, especially in a journalistic setting. If you're transitioning to title case, you'll be fine for the most part, but it will look awkward whenever an upper case abbreviation or name like "McKenzie" appears with a lower case "k". Transitioning to natural title case is ideal, but there's no simple programmatic way to do so.

Therefore—circling back to our original issue—if you initially hard code your headings with natural title case, you should have the easiest time transitioning to another casing convention.