typography

Fitting and inflating text and videos with responsive web design

There are plenty of solutions around for scaling images. Text and videos on the other hand – not so much. Here are a few that are handy:

FitVids.js – a lightweight, easy-to-use jQuery plugin for fluid width video embeds.
FitText.js – a jQuery plugin for inflating web type.
Letterings.js – a jQuery plugin for radical web typography.

Font sizing with REM

The em unit is relative to the font-size of the parent, which causes the compounding issue. The rem unit is relative to the root—or the html—element. That means that we can define a single font size on the htmlelement and define all rem units to be a percentage of that.

[…]

You might be surprised to find that browser support is surprisingly decent: Safari 5, Chrome, Firefox 3.6+, and even Internet Explorer 9 have support for this. The nice part is that IE9 supports resizing text when defined using rems. (Alas, poor Opera (up to 11.10, at least) hasn’t implemented rem units yet.)

What do we do for browsers that don’t support rem units? We can specify the fall-back using px, if you don’t mind users of older versions of Internet Explorer still being unable to resize the text (well, there’s still page zoom in IE7 and IE8). To do so, we specify the font-size using px units first and then define it again using rem units.

How to add Google fonts into your WordPress

Use Google to generate the CSS for the font, then include it using wp_register_style() and/or wp_enqueue_style() WordPress functions. This should probably be generalized to accept font name parameters, as well as probably moved out into a plugin.

Pictonic – font with popular logos and icons

Programming fonts

Once a decade or so I get to review my Vim configuration, which also usually brings my attention to all the things surrounding – bash, terminal, etc. This time around I wasn’t looking for anything in particular, but somehow I stumbled across the Top 10 Programming Fonts. Of course, this one of those lists that will vary from person to person, but given that I am not particularly into fonts, I thought I’d just try the ones recommended and maybe switch my day-to-day font to something better.

Gladly, these days, trying TrueType Fonts on Linux is really easy. Many are available directly through package management. The ones that not, can be simply downloaded into the fonts folder (/usr/share/fonts or ~/.fonts or whatever your distribution supports). Trying out the fonts from that article, I arrived to these conclusions:

Inconsolata is going to be my font of choice for now. It’s quite different from everything I’ve been using until now, in particular, it’s much thinner. But I love how easy it makes distinguishing zeros from upper O’s and ones from lowercase L’s. Bonus points for being available through yum install levien-inconsolata-fonts.noarch .
If Inconsolata weren’t easily available, I’d go with Droid Mono. Which is available through yum install google-droid-* . It’s very easy on the eyes, even if it doesn’t differentiate 0/O and 1/l so well.
I would have never chosen Monaco – even though it’s easy to try. I find this surprising, as I though Apple were very picking about their fonts. Maybe they are. But Monaco is hard on the eyes. I’ve opened a couple of screen of ugly code and my eyes nearly bled from lack of space and the amount of curvy edges. To each his own though.
Microsoft’s Consolas is a good font and I remember trying it out before. But given that it’s not that easy to find around and install, I decided to completely ignore it this time.

What’s your favorite font for programming?