Helpful Links for Successful Web Typography

Here is a collection of useful links for designers and developers from my presentation The Developer’s Ampersandwich.

Articles/Examples

Tools/Browser Extensitions

Free Web Fonts

A Formula for Speaking Fees

I was on a panel about public speaking recently and the topic of getting paid to speak came up. My answer: I do charge a speaking fee for most conferences I speak at. Ideally every person (full time, self employed) will be paid for speaking, but now that I’m a freelancer, it is imperative for me.

When I speak at a conference, I am committing to spending time away from traditional client work to prep a talk, practice a talk, travel to/from a talk, and give the talk. I’m super into math and formulas and I find that hard numbers allow me to figure a fair speaking fee. So let’s see how that works. If I say yes to an hour long talk, that can potentially break down to these hours:

  • Email correspondence with conference organizer (info, travel plans, etc): 1 hour
  • Prepping for talk (info, keynote design, research): 35 hours
  • Practice: 5 hours
  • Travel (including waiting at an airport, where I find it hard to do work depending on Internet/length of time): 5-16 hours
  • Conference (multi-day): 16 hours

That can be a total of 73 hours away from paying client work. Now, let’s break this time down a bit. If it’s a conference I’d be interested in attending, then the 16 hours at the actual conference can be a draw because I can also learn things there, So we’ll take that out of our total hours and now we are at 57 hours. Let’s say you only say yes to places with direct flights, no time zone change. That will save us some time, so let’s chop 7 hours off of our time to get down to a nice even 50 hours.

Let’s do some more easy math and say your freelance hourly rate is $100/hour.

50 hours (talk prep, travel) x $100 (hourly rate) = $5,000 potential money missed from paying clients

If you are comfortable with charging $5,000 a talk. Great! If not, here’s how you can get that lower without selling yourself short.

It takes me a long time to prepare for a talk, so I try to give it more than once. So if I am going to give the talk 5 times this year, then we can lower that number:

35 (total hours prep) / 5 (amount of times I’ll use this talk) = 7

Our new total hours for this talk, will now be:

  • Email: 1 hour
  • Prep: 7 hours
  • Practice: 4 hours
  • Travel = 8 hours

We now have a total of 20 hours so our new speaker fee can be:

20 (total hours) x $100 (hourly rate = $2,000 speaker fee

Still feeling too high for you? How about only saying yes to speaking in places that you would want to extend into a vacation? With that in mind you can cut the travel hours out of your formula - since you’d want to go there anyway. Now our new total is 12 hours, at 100 bucks an hour, will be a speaking fee of $1200.

Do you think this conference might lead to client leads? Well then maybe you can knock off another 100 or 200, and ask for an even $1000. This formula needs to be tweaked to your liking, but I find when I put numbers breakdowns in front of me, this thing (speaking) that some of us picture as intangible, suddenly becomes more of a product you are offering.

How do you ask for this?

I love when someone emails me, invites me to their conference and says: “And we’ll pay you $2,000!” - I”m like sweet! Perfect! But that doesn’t always happen. So then what? Just because they didn’t mention a speaker fee in the initial email doesn’t mean they don’t have money to give you one. So at this point, you can write back and say “what’s the speaker fee?” - but since I’m not always comfortable with a response like that, since i worry that might be read as I’m only in it for money - when lots of times conferences are a labor of love - I like to respond with thoughtful questions that will fill out my formula. Here is a sample of what I will write back:

  • How large is the audience?
  • What is the cost of the conference? How many speakers are there?
  • How long are the sessions?
  • Are talks recorded?
  • What is the speaker fee?
  • Were you looking for me to speak on a topic I’ve already covered or create a new talk with original material and slides?
  • Are there pre or post conference events to consider for travel planning?

If they write back and say the audience is 400+ people and the cost is $1000 a ticket and there is no speaker fee, I’ll respectfully reply that I can’t take unpaid days off from client work. This is especially amplified if they want me to create new, original content and/or if they will be recording and releasing videos of my talk on their site. From there, some people have said they understand and are sorry they can’t offer it and sometimes I’ve had people come back and either match what I asked or an offer close to it.

If they write back and say the conference will have 100 attendess and the cost is only $100 a ticket and it’s a place I really want to visit or at a conference I really want to attend, than sometimes I waive the fee, as long as they cover airfare, hotel, and travel expenses (such as cabs to/from the airport - that can be over $100 sometimes, and things like checked bag fees). Sometimes my boyfriend travels with me, and if they provide him a free ticket to the conference and an invite to the speaker dinner - that also is important to me. Conferences are expensive to run. I know that. So if they can’t pay a fee, how they handle the other details can be the deciding factors for me.

Lastly, I limit the amount of non-speaker fee events I’ll speak at a year, between 1-3, such as one local, one national, and one international. That way I have another formula that is easy for me fall back to when I am flattered by an invite, but realistically isn’t a viable event for my career or my accountants liking. And it is super awesome that anyone wants to hear me talk about things, so saying no to those is really hard, but this formula has helped me make smart decisions. Hope these ideas help you.

Also check out:

(Thanks to the wonderfully awesome Chris Coyier for feedback)

Advice on Teaching Beginner Front-end Code

I’ve had the pleasure of teaching Intro to HTML/CSS for Girl Develop It here in Philly since our inaugural class! Sharing my knowledge of front-end code with women who want to learn it has been incredibly rewarding and one of my favorite things to do! GDI has chapters throughout the world and I’ve been asked a few times to share advice to first-time teachers about to head up a class.

  1. Don’t read/recite the slides - use them as a guide but make sure you are brining your expertise to the class. That’s what makes it different than the students reading the slides themselves.
  2. Make sure the students have access to the slides and the materials before class so they can have it locally on their machine - sometimes it’s hard to see the projector if it’s too bright or if the room is long/the student is in back of the room
  3. Encourage questions!
    • If people ask questions that are beyond the scope of the course, don’t shoot it down. Be sure to touch on the subject and where they can find more info if they want to seek out more. The pacing of beginner classes can vary greatly, so don’t go too fast, but enable those with a more solid understanding to push themselves further.
  4. Make sure the TA’s feel comfortable helping people out while you continue. There’s a LOT to cover in these the short span of an intro class, so you don’t want to stop the whole class for a how to question about how to copy/paste - but you should stop the class if the question is applicable to everyone.
  5. Take scheduled breaks and let students know at the beginning of class when it will be. This helps ease their minds in regards to things like parking meter refills, lunch, brain timeouts.
  6. Go around the room and ask how people are doing. Some people will not ask for help until pressed. I can’t tell you how many times you can say “any questions?” and everyone will say no. But go around the room and up to someone and say ‘hows it going?” and questions will start pouring out.
  7. HAVE FUN!! :)

I’m also currently teaching Intro to HTML on Skillshare. Teaching without feedback from being in the same room is a completely different ballgame! Remember that the energy of an in-person class can really add to the experience and use that to keep the class fun and engaging!

Disabling Typekit on Mobile

Edit: Typekit has posted some more info in response on their fantastic blog: http://blog.typekit.com/2014/02/20/using-typekit-web-fonts-on-mobile/


I’m putting some finishing touches on a talk coming up and I was looking into some details when including different web font options on our sites. I use Typekit a lot. I love it. I never really paid too much attention to the Kit settings > Mobile settings options before.

And I started thinking about the pay off between having custom fonts on mobile vs having our sites load faster. Chris Coyier wrote a great summary of some approaches to tackle this: http://css-tricks.com/preventing-the-performance-hit-from-custom-fonts/ and there’s a post on the Typekit blog from Jordan Moore about using multiple kits and loading them based on breakpoint size (since no bandwidth testing was available) http://blog.typekit.com/2013/04/17/fallback-fonts-on-mobile-devices/

In this case, if we are using Typekit, should we just be disabling this mobile support that we have access to and letting fallback fonts be a browser/device safe font (i.e. Droid Sans)? It seems almost too good to be true to have these simple checkboxes, which are enabled by default, in which we can handle all the logic.

I read a bit more, such as in this Typekit blog post: http://blog.typekit.com/2012/11/01/announcing-windows-phone-8-support/, which says:

Following the pattern for our other supported mobile platforms, we’ve also added an option to disable support for Windows Phone in individual kits. You’ll find this option in the Kit Editor under Kit Settings > Mobile Settings. Uncheck the box for Windows Phone and republish your kit to turn off support. This option is useful if you’re building a responsive site that doesn’t require web fonts to be loaded on mobile platforms, or if you encounter issues with Windows Phone.

And I thought that certainly sounds like we can easily disable this. I did a very unofficial quick test to see what would load on mobile using one weight of Proxima Nova with everything enabled as on default which resulted in 32KB weight and 4 requests: http://www.webpagetest.org/result/140206_2N_dfc3ecd2d69159a6d9d148671b6f9477/1/details/

and then unchecked everything and ran it again and still had one Typekit JS request, resulting in 2 requests, 10KB http://www.webpagetest.org/result/140206_FG_22a5a9bfe7302d24e4a1c6479bbcdb81/1/details/

Sure, there are a ton of other things we can do to try to keep our page weights down, so maybe this isn’t the place to start? Here are questions that come to mind:

  • is there a better way to test this?
  • the speed index on this iOS test dropped from 3800 > 3000 when the mobile support was disabled , which still seems pretty high
  • will this work/save us enough to use it?
  • I only used one font/weight here, what if we disabled many?
  • should we be sacrificing type design for this?
  • are performance hits from web fonts on the top/middle/bottom of our list?
  • what about these mobile devices when connected to wifi? Is it cool that they never get the fonts? Worth the potential savings or no?
  • how should we be testing our fallback fonts? Is the extra testing/design time worth it?
  • are y’all disabling fonts through any of these approaches? If so, I’d love to hear about how it’s working out for you!!

So many questions!