Home Info Accessibility Typography

Typography

via Ashia

This is an introduction that says what you can expect to find in this post and what challenge it helps you overcome. But it’s probably not going to show up on this website, since posts are set to display the title of the post at the top automatically.

Below this, is a ‘wide line’ separator block.


cat
This is a caption for an image with a chill cat.

This text is in the right column. In the left column, there’s a picture of a cat.

This is how columns work.

If I wanted to go on and on, this column full of text would get longer, but the image would just hang out with a lot of white space underneath it.

Heading 1: Page Title, as if it’s the title of a book

So let’s play with that:

I’m going to add a drop cap to this paragraph. Just for shits. Interesting how the apostrophe comes along for the ride. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla onsequat massa quis enim. Donec pede justo, this right here is what a link looks like, vulputate eget.

And right after this, we’ll find a jaunty little ‘separator’ that gives us a visual break:


Heading 2

H2 should be used for main topics we’ll cover in the post. Like a chapter title. Aim for about 2-5 of these per post, more than that might be overkill.

Heading 3

Use H3 for sub-headings within each chapter. Sometimes I want to highlight text to make the article easy to scan for people with no patience. Do not use H3 just to highlight text, as it will confuse screen readers.

For drama, just bold an entire line and set it apart from standard body text.

Lommodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes lorem, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla onsequat massa quis enim. Donec pede justo, this right here is what a link looks like, vulputate eget.

Heading 4

Use H4 for resources that expand on the sub-section we’re on at the time. Stuff like: cross-posted links to other posts readers might like.

Heading 5 and…
Heading 6 will very rarely be used

To keep things accessible, we should never skip down (ex: H2 > H6), so we can’t use H5 or H6 for captions, even thought that would have been super convenient.

Using H5 & H6 tags involves so much granularity I doubt I’ll ever use them on this website.


Blockquote

This part isn’t a blockquote. It’s normal text. But right below that, without a carriage return or whatever, you can find a blockquote:

This is a quote of mediocre insight and a profound level of navel-gazing.

This is the second line of the block quote.

This is the citation line

Verse

This is a verse. I'll have to look up what that means later. Below this, find a new kind of separator line: DOTS!

Unordered List

Here is an intro to an unordered list. Squares, I think.

  • Here we go
  • Oh yeah. Nailed it.
    • Whoa a sub-bullet!
    • Is that what they’re called?
  • Back to the primary list
  • Wow we are so good at this.

Ordered List

This is a list with numbers.

  1. One!
  2. Er!
    1. Er!, but part 1
    2. Also Er! But part 2
  3. Tres!
  4. Sae! plus you can put links in here

Image with Caption

a grouchy kitten, recently caught
This is a caption for an image of a grouchy feral kitten.

This is text wrapped around an image that is aligned to the right. I’ve added a circle mask over it, which kind of ruins the whole image.

This image *should* be responsive to screen sizes, as I’ve set AMP settings to ‘responsive.’ We’ll see when I get a device to test that with.

Since I had already set alt text for this image when I uploaded it, the alt text comes along for the ride and I don’t have to include it when I place the image.

Same goes for the caption. It comes along for the ride. Neat.

And it’s helpful to know that I can adjust the caption for the placement of hte image here, but it doesn’t change the caption for the source image. So the kitty can have its own caption here, and in the original place I placed it, and the two don’t impact each other. The source image default caption is: “This is a grouchy shelter kitten. This is how I feel when I read crap books.”

But when I look at the new caption I’ve inserted here, it should say “This is a caption for an image of a grouchy feral kitten.”

Add Your Thoughts

This site uses Akismet to reduce spam. Learn how your comment data is processed.

This website uses cookies to improve your experience. Accept Read More