Make sure you get the web fonts! You can always view this email in your browser.

Web Fonts &
Typography News

Issue #1 • 15 February, 2019

Hi there—thanks for subscribing! I’m really excited to launch this endeavor. I’ve been researching, writing, and speaking about web typography for about ten years and hope to use this newsletter as a way to share that knowledge on a more regular basis. After all, type is the voice of our words—and your brand. I want to help get you in tune.

My hope is to send this out weekly and include a tip about some aspect of web typography (both design and technical) along with links to articles, sample projects, and code examples where available.

I’ll also include any interesting news tidbits I come across, and any upcoming talks and workshops I’ll be giving (along with any discount codes I have to share).

Thanks again for signing up—and please don’t be shy about sending feedback. This is only worth writing if you find it worth reading!

Cheers,

Jason

Replies go straight to my inbox—let me know what you want to learn!

Today’s Tip

Styling the first line

Seeing as this is the very first issue, I didn't want to start with something too complicated—at the same time I wanted it to relate a time-tested typographic technique in graphic design: styling the first line of a block of text.

This technique is pretty common in both magazine and book design, and is often used to set off the beginning of chapters, articles, or major sections within them. Small caps (specifically designed smaller capitals in place of lower case letters), like you see below, or a bolder weight are two frequent solutions.

Detail of chapter opening with first line small caps from Steven Johnson's The Invention of Air

In order to be useful, we want to avoid extra HTML markup and be sure it works no matter where it's viewed. With the sheer volume of screen sizes and devices out there, it's impossible to know exactly how many words will be on that first line. That's what's so great about this technique: it doesn't matter! It just works.

The ability to do this on the web has actually been well supported for years, but I've rarely seen it put to use. Particularly with resonsive design, the idea that we can use a technique like this that will target the first line without any additional HTML makes this a great technique when used in a content management system to style posts in a consistent manner.

Here’s an example using the first paragraph of Beatrice Warde’s seminal essay The Crystal Goblet

The image above is of an example hosted on CodePen, which you're free to play around with and see how it works.

Here's the CSS:

p {
  font-family: Georgia, serif;
  margin: 2em auto;
  max-width: 38em;
  /* try changing this number to see how only the first 
  line changes, no matter how long or short the line */
}

/* This is what targets the first line of the paragraph */
p:first-line {
  font-weight: bold;
  font-variant: small-caps;
}

The code above will target the first line of any element (in this case, the paragraph). You can be more selective by using an additional adjacent or pseudo-selector like so:

/* target the first paragraph in any grouping */
p:first-of-type:first-line {
  font-weight: bold;
  font-variant: small-caps;
}

/* target the first paragraph immediately following an h2 */
h2 + p:first-line {
  font-weight: bold;
  font-variant: small-caps;
}

That’s it! Now you can easily style the first line of text in any element. Used with care, it can add a nice level of refinement to your typographic design.

This technique is often used in conjunction with drop caps (specifically styling the first letter of an element), but I’ll save that for next week. Like this one, it’s pretty well supported—just a bit more finicky to finesse in all browsers.

Resources

Example on CodePen
Browser support on Can I Use
I cover this and other tips for styling paragraphs in my talk The Life of <p>

Web Type News

I'll be writing more about dynamic, fluid typorgraphy with CSS based on the talks I've been giving over the past year, but some really nice alternative tools have come along, and are really worth a look.

Does your organization need a boost?

If your brand voice needs some volume, or your team could use a hand improving font performance—maybe you could use a Type Audit. I work with you and your team to identify how well your site’s voice aligns with your brand, and can show you how to improve how quickly it gets on screen on any size device. Read more about Type Audits and let’s talk!

Upcoming Events

I’ll be moderating a speaker Q & A discussion at Type Director's Club Type Drives Culture event on March 1st
Giving a talk about 'Dynamic Typography with Variable Fonts' at NERDsummit on March 9-10
Teaching a full-day workshop and giving a talk about typography and variable fonts at Smashing Conference San Francisco on April 15-17

If the typeface in this message has Georgia on your mind, you're not seeing the web fonts :( I'm hoping that you're seeing it set in the lovely Roslindale (Display Condensed and Text) designed by the amazing David Jonathan Ross for his FontOfTheMonth.club. You should check it out!