It took a couple of false starts and a lot of Googling, but I’m happy to report that it is possible to customize the look of your tweet-this link, and to embed an image. It requires a work-around, but it’s certainly not hard. I’ve gathered up what I learned into a quick little guide that I hope you will find useful.

How to embed an image into a tweet-this link

So here’s the first trick. You cannot embed an external image into a pre-populated link for your user, but you can embed an image from Twitter’s own servers. How do you get your image onto Twitter’s servers? Easy. You tweet it.

For my project, I had eight images I wanted to use depending on the results of user input, so rather than bogging down my own feed with images out of context, I opened up a dummy account to post them.

And now for the second trick. Embedding your image isn’t as simple as right-clicking on the picture to get the URL that points to the image file, so here’s how to grab the link you need:

1. Right-click on the timestamp, and open the link in a new tab.

2. Click on the image to expand it, then open up your inspector. Search for pic.twitter.com. This is the link you’re looking for.

Note that this URL doesn’t point directly to your image file. The URL is a permalink to your tweet containing the image. For example, here’s mine: pic.twitter.com/E3SdsiIqPr.

Don’t be tempted to delete your tweets once you’ve got the embed code. I made that mistake, and had to begin again from scratch.

And there you have it! If you aren’t looking to customize the look of your tweet link, you’re already done. Include this URL in the custom text in your favourite button generator. The resulting tweet will look something like this:

How to customize your twitter button

The button generated by Twitter’s tweet button looks like this:

Meanwhile, this is what I was picturing:

Luckily, it’s easy as pie to make a URL that you can wrap around anything you like; in my case, I used a Font Awesome icon with a little CSS glow. But here’s where I went off track for a minute: many of the tutorials and link generators I found used a depreciated format that doesn’t work on mobile.

This is the magic formula:

https://twitter.com/intent/tweet?text=Your%20Content%20Here

Note that spaces are replaced with “%20”. In the latter part of your link you can include the URL of your website, your twitter handle, and yes, the image URL you grabbed above.

Here’s what mine looks like:

<a href="https://twitter.com/intent/tweet?text=My%20aura%20is%20blue.%20Discover%20your%20aura%20at%20http://www.carolynmcneillie.com/colours%20pic.twitter.com/E3SdsiIqPr%20@carolynalive" target="_blank"><span class="fa fa-twitter"></span></a>

And there you have it!

I hope I’ve managed to save you a little time and headache. Let me know in the comments if you used this guide. I’d love to check out your project!

Chapter 2: Rhythm & Proportion

—Robert Bringhurst, The Elements of Typographic Style

Pop quiz: What CSS property do you use to set the color of a text block? If you said color you were … wrong! Don’t take it too hard, though. It was a trick question.

In typographic parlance, “color” refers to the optical density and texture of a block of text, and after legibility, the successful typesetter’s chief aim to achieve an evenness of color. The second chapter of Robert Bringhurst’s The Elements of Typographic Style is chock-full of specific guidelines you can easily apply. You’ll also learn the one thing that totally changed the way I think about ems, and why Frederic Goudy was the Madonna of early 20th-century type design. Read on!

Word spacing, or How I Learned to Stop Worrying and Love the Em

The em is a typographic skeuomorph that trips up a lot of web developers. Because the em is a relative measurement, it’s been adopted widely and enthusiastically for responsive design — but what are ems relative to, precisely? The lowercase letter m, of all things. And not some abstract constant ideal of the letter m, but the literal specific letters you are styling. You can fall into a cascading rabbit hole: if you set a parent <div>, child <p>, and a <span> all at 1.5em, suddenly you could find yourself looking at something very odd.

Like many of you, I just accepted the em’s eccentricities and became proficient in using it to set font-size, padding, margins, and even min- and max-widths. But there was always a little voice in the back of my mind that whispered, “there’s something kind of hacky going on here.” That’s why I literally exclaimed out loud when I read this:

“Type is normally measured in picas and points, but horizontal spacing is measured in ems.”

Did you feel that? Chills.

Typesetters use ems for one very specific purpose: to control horizontal whitespace within the text. The em is generally split into fractions and used to set space between letters and words. Does that mean that you can’t use ems for layout and font-sizing? I’m certainly not going to stop you. (But you might want to check out the em’s born-digital baby sister: the root em, or rem.)

Rules of Thumb

• The standard space between words is 1/4 em
• The heavier the text, the greater the word space required
• Larger text requires less word space
• Justified text reflows within the column, and so word space becomes elastic. Aim for a minimum of 1/5 ems, and a max of 1/2
• Use a single word space between sentences! Tapping the spacebar twice after a period is a weird relic and not good practice. Your browser ignores the extra word space anyhow when it renders your HTML. Hug your browser

Tracking

“A man who would letterspace lower case would steal sheep”

—Frederic Goudy

Goudy’s Wikipedia page is worth a read, and not only for gems like the one above. At the age of 40 he was working for a Chicago realtor and considered himself a failure. Then over the course of the second half of his life he underwent a total reinvention and became one of the most successful and prolific typographers of all time. He set 113 fonts, quarrelled with seemingly every foundry he collaborated with, and lost an entire body of work in a fire. He also designed my favourite ampersand.

It’s not totally clear to me what stealing sheep has to do with typography, but I’m pretty sure Goudy thinks it’s pretty bad, because I know he doesn’t approve of letterspacing lower case.

If you add extra spacing to body text, it’s generally pretty hard to read. However, letterspacing (also known as tracking) can be very elegant when applied in places where the text is very heavy (bold text or all-caps) or where the letters or numerals are meant to be read individually. Well-placed letter spacing can really make it look like you know what you’re doing. Check out this example:

Rules of Thumb

• Letterspace all-caps, small caps, and long strings of numbers by 5–10%. If you’re really serious, you might start digging into how you can achieve this in your body text with grep
• Experiment with adding extra letterspace to headings. Remember that expanded letterspace should be balanced with more generous line heights
• Consider letterspacing anywhere the individual letters or digits are what’s important to read separately
• Be wary of letterspacing words

Kerning

Kerning is the practice of adjusting the space between individual characters. It’s different from tracking, because tracking is applied evenly across all the characters in a section of text. Kerning, meanwhile, is applied manually by a practiced hand in order to optimize the visual appeal of the word. There’s a bit of magic in it, but as a general guide, letters that are round or slanted (o, v, and e, for example) will look farther away from adjacent letters, and letters that are blocky and/or straight (M, l, N) will look closer to the letters beside them.

If you’ve heard the way people talk about kerning, you know that folks have opinions. Maybe you’ve been wondering if you should be doing it. But I have some good news for you: kerning is best left to print designers. The best way to kern for the web is to do nothing at all. In fact, the fonts you are using have built-in kerning tables that a type designer has already carefully formatted. If the spacing of your type selection looks wonky, it may be better to use a different font than to struggle with a poor design.

Rules of Thumb

• Don’t attempt kerning in your web design unless you want people on the keming subreddit to laugh at you

Leading

Leading, the spacing between lines of text, is named after the literal bands of lead typesetters once used to design the page. With font size being measured from the top of the “d” to the bottom of the “p,” standard typesetting proportions for leading are 9/11, 10/12, 11/13, and 12/15.

Rules of Thumb

• Standard leading is about 20% (or line-height: 1.2;)
• Add more leading to increase legibility for wider columns of text and heavier fonts
• Sans-serif fonts require more leading than serif fonts
• It’s nice to set all typographic features with multiples of the same line height. This is especially true if you’re working with multiple columns. They look tidier if the line-height is proportionally consistent and the text will fall neatly onto the same horizontal line

Layout and Proportion

One very easy mistake to make in web design is allowing columns of text to be too wide, especially on desktop views. When lines get very long, it becomes difficult for the reader to find their way from line to line across the page. As a guide, the average book page text block is 30 times the size of the type. Applied to web design, that would mean a 480 px column for the average 16px font. Medium does this very nicely; if you’re reading this on a desktop computer right now, you’re looking at 20px font set in 690px columns. Feels good, doesn’t it?

Within your text blocks, there are two ways you can lay out your paragraphs. Block paragraphs are set flush left with a white space between. This is the browser default, and how the paragraphs you are reading now are set. Block paragraphs are also common for business documents. For short documents, block paragraphs “suggest precision crispness and speed,” but in a long sequence, Bringhurst warns that they can appear “soulless and uninviting.”

The other option is to set paragraphs to run together vertically, with a first-line indent to separate them visually. This is a very nice way to set long reads, and is common in novels and magazines. If you take this approach, set opening paragraphs flush left, then indent subsequent paragraphs. (The pseudo-selector :first-child is your friend!) Text indentation should be at least 1/2 em, and 1 em is most common in typesetting. In my opinion, Microsoft Word’s default intent is way too much. Bringhurst is more generous, and allows for up to 3 ems.

Rules of Thumb

• Aim for 45–75 characters (including spaces & punctuation) per line of text. Bringhurst says that 66 characters per line is ideal
• In multi-column layouts, aim for 40–50 characters per line
• To cheat the line a little longer (90 characters, tops!) increase line height
• Save yourself a headache and don’t go below 40 characters per justified line of text; set short lines of text ragged-right
• In Bringhurst’s estimation, sans-serif & monospace fonts should always be set ragged-right

Hyphenation

Did you know you can set hyphenation rules in CSS? If you find yourself needing to save space on the page, a solution can be to set your text in multiple paragraphs. Hyphenation allows justified text to space nicely and evenly. For the web it’s recommended that you use hyphenation sparingly, however.

In type design, there is a long list of rules for ensuring that hyphenated text is beautiful and legible. Typesetters and proofreaders feed their families making sure that these rules are followed faithfully. But because of the re-flowable, responsive nature of the web, it’s nearly impossible to follow even one of them in web design. Have a look:

• Leave at least two characters behind and take at least three forward in a hyphenation
• Avoid leaving the stub-end of a hyphenated word or any word less than 4 characters as the last line in a paragraph
• Avoid more than 3 consecutive hyphenated lines. (Typesetters call these “pig bristles”)
• Avoid breaking two consecutive lines with the same word
• Never begin a page with the last line of a multi-line paragraph. (This sad, lonely little line is called a widow)
• Balance facing pages by moving individual lines

If you do decide to use hyphens, here are some guidelines to follow:

Rules of Thumb

• Use non-breaking spaces (&nbsp;) when it’s important that a line doesn’t break on a space. An example is a mathematical notation like a + b − c
• Use hyphenation only on justified text. If hyphenation is turned on for left-aligned text, you may wind up with a combination that is the worst of both worlds.

So that concludes Chapter 2. Check out this Codepen and play with what you learned.

Stay tuned for Harmony and Counterpoint. I noticed there’s a flow chart, so I think it’s going to be a good one.

TL;DR

In an exercise that I hope will make me better at my job, I’m going back to the well, and mining the hallowed pages of Robert Bringhurst’s typographic bible The Elements of Typographic Style. Over the next few months, I’ll write a series of summaries of the nine chapters in Bringhurst’s text, along with some resources, tips, and code snippets to help us apply his advice to the screen.

This was Chapter 2. Maybe you would like to start with Chapter 1, or subscribe to my feed to follow along.

The Elements of Typographic Style by Robert Bringhurst is published by Hartley & Marks

Bolster you type cred and get a copy from your favourite indie shop.

Chapter 1: The Grand Design

Even under its most expansive definition, the Internet can be traced back fewer than sixty years, and for most of that history, it was not known for an elegant reading experience. But around the time you were watching auto-tuned news clip memes and gathering your loved ones to watch the series finale of Lost, CSS3 and web fonts swooped in and totally changed the game.

When it comes to setting type on a page, we have centuries of collected wisdom to draw upon — and now we have the tools to apply it to digital media. In an exercise that I hope will make me better at my job, I’m going back to the well, and mining the hallowed pages of Robert Bringhurst’s typographic bible The Elements of Typographic Style. Over the next few months, I’ll write a series of summaries of the nine chapters of Bringhurst’s text, along with some resources, tips, and code snippets to help us apply his advice to the screen.

The subject of this book is not typographic solitude, but the old, well-travelled roads at the core of the tradition: paths that each of us is free to follow or not, and to enter and leave when we choose — if only we know the paths are there and have a sense of where they lead.
 — Robert Bringhurst, The Elements of Typographic Style

Remember, these rules are only guides. Once we are familiar with the presiding wisdom, we can intelligently bend and break the rules to achieve our own aims.

Got it? OK, let’s go! First up:

First Principles

Before we really get into the nitty-gritty, this chapter establishes the foundational assumptions we should make whenever we approach a typographic project. Typography’s chief accountability is to the text. Whether your purpose is to clarify, honour, or even challenge the meaning of the words on the screen, the content itself should inform your choice above style, fashion, or any other consideration.

It doesn’t matter if you’re setting the e-book edition of War and Peace, an address book app, a database, or a shouty pop-up window (please don’t make any shouty pop-up windows) your font selection should be clear to read, convey something of the appropriate tone for the task at hand, and should be attractive enough to draw attention — but humble enough to then fade behind the meaning of the text.

Once, type was necessary for copying and mass-producing text, but we have scanners and offset printers now, and yet we don’t read novels written in breathless longhand. When you set words into type they become more authoritative, uniform, and clear. Sensitivity to the aura that your type choice conveys is vital.

Well-chosen words deserve well-chosen letters; these in their turn deserve to be set with affection, intelligence, knowledge, and skill. Typography is a link, and ought, as a matter of honor, courtesy, and pure delight, to be as strong as others in the chain.

— Robert Bringhurst, The Elements of Typographic Style

(Bringhurst gets a bit gooey when he talks about letterforms, and I am here for it.)

Ok, cool. How do we do it?

Bringhurst has a section called “tactics” where he lays it down. The advice is his. The commentary is mine.

Read the text before designing it. Natch.

Discover the outer logic of the typography in the inner logic of the text. This is a super-roundabout way of saying that your typography should orient a reader to the parts and flow of a text. This is where your semantic markup comes in, with the thoughtful application of <header>, <aside>, <footer>, the whole <h> gamut, <ul>, <ol>, etc. etc. Bonus: following best practices for semantic markup not only gives you the foundation for good typography, it can also open up your content to readers who might struggle with a printed page. Read up on accessibility for the web.

Make the visible relationship between the text and other elements. Make friends with alt, title, <caption>, and <figcaption>, you guys.

Choose a typeface or a group of faces that will honor and elucidate the character of the text. Bringhurst calls this “the beginning, the middle and end of the practice of typography.”

It used to be that web designers and developers were limited to fonts that would be reliably installed on the user’s computer. The Internet was a sea of Arial, Times New Roman, and an alarming amount of Courier New. Thanks to web fonts, we can now access an incredible variety of typefaces for your website with just a few additional lines of code.

Type selection is examined in detail in chapters 6, 7, and 10. For now, take a good look at Google Fonts, Typekit, and other web font resources. Learn how to use them, so later we can learn how to use them well.

Shape the page and frame the textblock so that it honors and reveals every element, every relationship between elements, and every logical nuance of the text. This is one of the places where we can stand to learn the most from traditional typography, and also where we are most in need of new solutions. Unlike working in print, when we are designing for the web we rarely if ever have control over the shape of the page. We must always think intelligently about how to design our textblock to adjust elegantly and responsively to the shape of the screen it’s being viewed on. This calls for adjusting to smartphone screens, yes, but we must also (maybe especially) glean from the tradition of typography when we are designing for the browser. Intelligent use of whitespace and limiting the maximum width of a block of text is essential to the reading experience. We’ll really get into this in Chapter 8.

Give full typographic attention even to incidental details. Nerd out, my nerds. Nerd out.

That wraps Chapter 1. Tune in next time when we’ll be getting into it with Rhythm & Proportion. Subscribe to my feed to follow along.

The Elements of Typographic Style by Robert Bringhurst is published by Hartley & Marks

Bolster you type cred and get a copy from your favourite indie shop.