Blackout Font, Still Free, Better Than Ever

So last week after I launched Lickety Split I just kept Fontlab open and stayed busy.

Turns out working with March Madness in the background is actually a pretty decent way to break the monotony of both font tweaking and occasionally boring basketball. But I did more than just fix things, I added a whole new style: sunrise.

I made a baby site for Blackout, where you can get everything. Micah kindly updated The League of Moveable Type page and pushed to the Github repo (feel free to add those international characters/accents). But what I like the most about the new site is the top example of Blackout.  I used some very simple CSS in combination with Fittext.js for a cool reversed out effect (so the font looks like Blackout Midnight, but is just a white version of Two AM). Yes image masking with text can be done, but not across all current browsers. This (screenshot above) is a lo-fi solution that should work. The only caveat is that you need a solid background (and make your text the same color as that background):

The CSS:
#title {
-moz-transform: rotate(-6deg);

#title h1 {
background-image: url("link-to-your-image.whatever");
background-position: center center;
background-repeat: no-repeat;
background-size: 94% auto;
color: white;
font: 200px/0.9 'blackouttwoam';
margin-bottom: 0.15em;
position: relative;
right: -0.15em;
text-align: center;
text-indent: -0.045em;
text-transform: lowercase;

$(".title").fitText(0.55, { minFontSize: '90px', maxFontSize: '400px' });

And, duh, you can view it live and check my source. Pretty straightforward.

Also, I would love to see what people do with Blackout. Tag your Dribbbles and I’ll add it to my bucket. Or hit me on Twitter (@finck).

I should mention: there is no way I would have put the time and energy into remaking Blackout had it not been for the awesome emails I’ve received from cool users over the years. I’m sorry if my decision to remove it from Typekit disappointed any of you (which I wrote about here) and if I get time to make Blackout internationally accessible I think I can get it on Google Web Fonts. So sit tight, I’m still not finished.