Monthly Archives: November 2013

Doing Responsive Typography

Responsive typography makes it possible to serve typographic compositions that adapt to fit their various environments, resizing, reflowing as necessary to best serve the reader, whether they’re viewing the content on a phone, a cathode ray tube, a large display, in print, or something in between. With this piece, we’ll take apart a simple example of responsive typography I made, and see how it works. Adapting other aspects of typography beyond size, measure, etc. is certainly open to further exploration, but I’m keeping this first one simple.

Responsive typography is just typography.

All normal principles apply. The new principles involved deal mainly with being mindful of in-between states—the areas just outside your control. Ready? Let’s go.

Doing-Responsive-Typography-1

Here’s the demo I made.

I started by setting up a development environment on my computer (an Apache web server), and tested on real devices as I went. I wrote the markup and styling (HTML and CSS) in a text editor (BBEdit). And I did a lot of fiddling with the styles in the browser (using Firebug, an add-on to Firefox).

I built out the structure of a two-column layout with the idea that as the width of the page contracts, the right column is hidden. (I could have just as easily turned the right column into a footnote or something.) I styled the page following my own CSS advice: specify as little as possible. In the HTML header, I added this important meta tag:

<meta name="viewport" content="width=device-width"/>

This prevents smaller-screened devices from displaying a scaled-down desktop version of the page. It keeps the text from getting too small. Don’t underestimate the importance of this step.

Set the body font-size to 100%.

Type that’s sized smaller or larger from here should be specified in em units. Since em units change depending on the font-size specified in a given element, you may want at times to refer to the original em you specified. You can. They’re called root ems, or rem units. In the right column, I give the line-height in rem so that I’m able to maintain the same baseline rhythm as the normal body copy. (Since the body’s line-height is in rems, I could have just as easily set the right sidebar’s line-height to inherit.)

Just as an aside, reorienting from portrait to landscape has become commonly understood as a simple way to make the text a bit larger. Some (those with poorer eyesight) are in fact counting on this. So just because you can maintain a consistent text size across different orientations doesn’t mean you necessarily should.

Screen Shot 2013-11-07 at 7.55.06 PM

Give yourself margins.

One common problem with typography on the web generally is a lack of margins. Setting margins to auto works fine until the window or viewport causes that auto value to go down to zero. So in this example, I put an additional 2em body margin outside the content wrapper’s auto margins.

Breakpoints

It’s precisely at this spot where the auto margins hit zero that I place my first breakpoint. More like a transition/squish-point, really. All that changes when the viewport goes down to 52 ems is that the content wrapper goes from a specified 45 ems in width, to taking up 100% width of its parent element, the body. In CSS, that looks like this, just below everything else in the file:

@media only screen and (max-width:52em) {
 #wrapper {
    width: 100%;
 }
}

Screen Shot 2013-11-07 at 7.56.15 PM

As the two columns shrink in size, their text reflows as needed until the right sidebar column gets too narrow. At this point, for simplicity’s sake, I just take it out, and let the main column take up the full width.

@media only screen and (max-width:45em) {  
  #sidebar {
     display: none;
  } 
} Screen Shot 2013-11-07 at 7.57.38 PM And it's that simple.

What’s left to improve here? Well, for starters, I think I could show more variety in terms of type size and webfont specification. Maybe the right sidebar could go up a touch in weight. I could get those baselines to reconcile.  I could demonstrate how to target different screen resolutions differently. Seems like the measure on the iPhone is a bit narrow. And I could definitely do something more interesting with the layout at larger sizes. Maybe add a nav area to show how to scale and selectively show/hide links. There’s really a lot I’ve got left to explore.

I’ll return to this series on responsive design from time to time with demos of stuff I find interesting.

Using Type continues here each Thursday. Thanks to Nicole Dotin’s Elena for setting the nameplate, and of course Michael Abbink’s FF Milo Serif Web for the live demo text.

Athelas and Domus Titling

Today we’ll take a quick look at  Veronika Burian & José Scaglione’s Athelas with Tim Ahrens & Shoko Mugikura’s Domus Titling.

Athelas-and-Domus-Titling-1 Athelas-and-Domus-Titling-2

Both drawing from classical models, but introducing their own twist, the pair support each other nicely. Domus Titling is based on and carries the proportions of formal inscriptional lettering, but its rounded corners and soft stroke endings create some contemporary interest. Athelas likewise plays with the transitional or neoclassical Roman model, introducing updated touches here and there. Its italic particularly breaks from convention, pursing a feel much more calligraphic than drafted or engraved.Athelas-and-Domus-Titling-3 Athelas-and-Domus-Titling-4 Athelas-and-Domus-Titling-5That’s it. Great Pairs continues here Wednesday.

New Fonts This Week

Festival Script by Sudtipos
Webfonts Available
festival-script
Santis by Latinotype
santis

Continuing Promotions

In a Jar by Latinotype $39 until 13 November

Magallanes Condensed by Latinotype80% off until 20 November

Blok, Scissorgirl, Ebu Script, and Surreal Post Indian by Type-Ø-Tones20% off until 30 November

Equip and Equip Condensed by Hoftype — 50% off until 2 December

Abdo Fonts Promotion — until 4 December

15% off Abdo Free, Abdo Line, Abdo Title, Abdo Screen, and Abdo Logo
25% off Abdo Egypt and Abdo Joody
40% off Abdo Rajab and Abdo Salem

Buyer’s Guide: Offline Payment Options

FontShop has several online payment options, but did you know that we have offline options? You can request to pay by purchase order with a check or wire transfer.

buyersguide-currencies2

Just email our Support Team and we’ll send you a form to fill out so that we can add your company to our database. You can then email your purchase order request to FontShop to fulfill. If you need a formal quote before placing an order then we can create one for you. Once your order has been processed, you’ll receive your fonts in a zip file through email with your invoice.

Pinterested: Cut & Color

cut-and-color

Construction paper never looked so good! Check out Cut & Color for precision paper crafting and all kinds of fancy folds to inspire your next project.

Follow

Get every new post delivered to your Inbox.

Join 61,750 other followers