A few days ago I clicked a link in Twitter to read this post wondering where the women in WordPress are. Since I am one, I’m pretty interested in the topic.

After all, there’s a gender gap in pretty much every industry. Even though we make up 57% of all college graduates, leave with a higher GPA and pay the same amount for our educations we still make 77 cents for every dollar a man earns. That’s a loss of almost half a million dollars over a 40 year career.

I mean, for God’s sake, a few days ago Steve Kush, the executive director of the Bernalillo County Republican Party in New Mexico, called a 19-year-old Working America volunteer a “radical bitch” on Twitter, following it up with a tweet about how she was “hot enough to almost make me register democrat”. And that’s not tech. That’s every single industry there is. But after reading the post, I didn’t see my experience as a woman in WordPress reflected in it. So I decided to write about *my* experience as a woman who has worked on the web for 17 years and WordPress for the last five.

I want to start this off by saying that everyone has their own experiences and opinions on this topic. My goal isn’t to tell anyone they’re “doing it wrong” or that how they feel isn’t valid. This post is to share my personal experience in the industry and talk about how I am personally working to make my own change instead of waiting for change to happen organically or asking for someone else to change the industry for me. If your experience is different, please, share it! Until we’re ready to have an open conversation about the topic and become an active part of the solution, nothing’s gonna change.

To give you an idea of where I’m coming from, I’ve been working on the web for 17 years, in companies ranging from a skateboard manufacturer (made up primarily of 16-29 year old dudes) to a scrapbooking magazine (dominated by women–I think there were 10 men in the entire industry). For the last five years, I’ve worked with WordPress and the Genesis framework exclusively. Maybe I’ve been fortunate, but in all of that time I’ve never once felt like I was being discredited, passed over or sidelined for being a woman. Some of that, I’m sure, is simply good fortune, but I think the majority of the reason is that I expect to be respected and treated as an equal. Here are five of the things I do to make sure I am:

1. Respect is mutual (i.e. don’t be a dick back)

If we want men to respect us, we should respect them back. I know I would get tired of constantly being told I’m a pimply faced nerd with no social skills who doesn’t know how to talk to girls. When I think about my professional network in the WordPress world, I don’t see that stereotype at all. People like Brian Gardner, Bill Erickson, Chris Lema, Dre Armeda, Steve Zehngut, Austin Gunter and too many others to list here have always treated me with the utmost respect. Not a single one of them is a sausage-fest-y member of the He-man Woman Haters Club. In fact, I can pretty much guarantee that if I were to stop waxing (getting old sucks, y’all) and take up smoking they’d gladly let me show up at a BeardPress event to smoke stogies and drink scotch. They’re just cool like that.

2. Use Your voice

There was a huge kerfuffle a while back at PyCon. You can read more about it here if you’re so inclined. In a nutshell, a couple of guys were making some Beavis and Butthead level jokes about forking code with their big dongles. Instead of calling them out on what she felt was an inappropriate conversation, a woman there publicly shamed them on Twitter, complete with a picture of the men. Two people lost their jobs (including the woman who sent the Tweet). And it made for quite the Twitter Outrage Event for several days. Now, I probably wouldn’t have been offended at that, since I’m basically a 14 year old boy trapped in a 40 year old woman’s body. It’s likely I would have thrown gas on the fire with inappropriately snarky comments of my own.

But I *have* been in situations where I didn’t agree with the conversation going on. At my first WordCamp, I was stoked to be sitting at a table with a bunch of “big dogs”. I didn’t know everyone at the table, but I knew they were all kind of a big deal. I overheard one of them say something about “the f***ing Mommybloggers.” At the time, I had two themes for Mommybloggers in the StudioPress store. I felt like a woman-specific industry I was deeply involved in was being called out as less valuable than other business verticals. And it made me really, really mad.

I could have sat there and stewed, or posted a gripe on Twitter, or written a “pimply faced nerd-boys can suck it” blog post. Instead I spoke up and said “Those Mommybloggers are responsible for the success of my business, and it sounds like they’re responsible for a lot of yours–so why talk shit?” (FYI: if you haven’t met me in person, I tend to have a mouth that makes my truck-driving uncle blush.) The mood at that table went from woo-hoo to WTF in 0.7 seconds. When the silence became excruciating instead of just awkward I excused myself, and felt like an idiot for calling out someone who was at the top of the food chain in such a public and direct manner. This particular story has a great ending, though–at a party later in the evening that guy was in a group of people I was talking to. We wound up having an awesome discussion about Mommybloggers and their place in the industry and drank a beer and laughed about the awkwardness after I dropped a word-bomb at the lunch table and had a great time hanging out.

But if I’d kept my mouth shut and stewed about it, I may have left the conference feeling like “Man, they sure do disrespect women at that company.” Instead we had a discussion and everyone left feeling good about the conversation. Even more valuable was that it made me think a lot about the effect that segment of the community was having on WordPress as a whole. It was actually pretty awesome.

3. Show Up

If you’re lamenting the lack of women in WordPress, start showing up! Go to WordCamps and Meetups. Engage in conversations on Twitter and G+ with people you respect. Get involved with support forums or contributing to core. Ask for opportunities. I went to an Advanced WordPress Meetup last night. There were 11 guys at the table and me. These guys are scary-smart developers. 60% of the stuff they say whizzes over my head so fast I’m afraid it might scalp me. But I show up, and ask questions, and offer my opinion on topics that I do know a lot about, even if it isn’t making OOP plugins or multidimensional arrays. And every single guy there has been more than willing to not only walk me through things I may not understand, they’re willing to listen to what I have to say as well. Visibility for women in the community only happens if you bother to show up.

4. Look around–we’re here already

I actually think that, as far as tech goes, WordPress is one of the most open and accessible communities for women. I remember being blown away at the number of women who were at the first WordCamp I attended. It was the first tech conference I’d ever been to that gave you the option of ordering shirts sized for women, because there were enough of us attending to make it an issue. It’s probably because there are already a huge number of women who kick all kinds of ass in the WordPress community. There’s no way I can list them all, but some of the most influential ones for me are Andrea Rennick, Jessica Barnard, Megan Gray, Lauren Restored, Shannon Dow, Linsdey Riel, Heather Jones, Joelle Reeder, Suzette Franck, Lisa Sabin-Wilson and Carrie Dils. I’m sure I’m missing loads of them, so add your favorites to the comments below! I only see the industry coming more into balance as WordPress grows.

5. Be the change

Not happy with the status quo? Work on changing it. I’m not a huge proponent of women-only tech events, since I want to learn from anyone who is awesome. I totally cracked up when Mandie Shaner tweeted “I’ll start paying attention to the ‘women in tech’ posts when we all start actually building internet things using our genitals.”

I see that as a valid opinion when it comes to writing code or other concepts that aren’t affected by gender. But what about things like negotiating salaries and rates? It’s fairly well known that women do a less effective job than men at that task. We are less likely to highlight our accomplishments, believe we’re worth more money, are worried about people liking us, and other things that are probably related to our moms telling us things like “Nice girls don’t do that.” So I’d love to see some women-specific events that address the things in our industry that *are* holding us back because of our gender.

For example, the business track at WCSD this year was awesome and I learned a lot–but I’d love to see a woman who owns a WordPress-powered business talking about her unique perspective on success at a future conference. We *do* approach certain things differently, and it would be really interesting to compare the approaches where everyone has access to a different peerspective. I don’t want us to segregate women (or men) into a gender ghetto, but I do think we have valuable lessons in learning how different genders approach common business problems.

Now that you’ve read my manifesto on changing the WordPress world, I’d love to hear your opinions. It would be awesome if we could move beyond some of the talking points that have been around for years and start creating solutions for ourselves. Hit the comments with your stories and suggestions. Write blog posts telling me what an idiot I am (and why) and link em up. Bottom line, start the conversation. And when you’re done talking, do something concrete to change the dynamic. Nothing’s gonna change until we make the change ourselves.

“When you are through changing, you are through.”–Bruce Barton

Today is the end of an era for us at Creativity Included. Our flagship Genesis child themes, Family Tree and Bee Crafty are going to be retired. As much fun as they’ve been, it’s time to let them go.

In December I went on my annual “Self/Business-Improvement” campaign, and read a blog post by Chris Lema called Success In 2013: Focus on What You Do Best. I wanted to answer the question as honestly as I could, so I made a list of my strengths and weaknesses as a designer to answer that question. And I after looking at everything I realized while I was a pretty good theme designer, what I was *best* at was solving client problems.

When Copyblogger moved all of their theme support to a new ticketing system I was no longer able to just log in to the forum and answer support questions. That meant any non-StudioPress themes had to be moved out of the main store and ProPlus package. I thought about moving both Family Tree and Bee Crafty to either the StudioPress Marketplace (where our other child theme, RealPro is still available). The truth is, though, is that both themes are starting to show their age. They could use a little TLC, and if I’m going to focus on what I’m best at, I just don’t have the time I need to get them where they’d need to be without focusing on them full time. So, they’re being retired.

So what’s next

We’re getting ready to launch a new service called “Simply Customized”. We’re using the lessons we learned as a theme designer and customizer to provide a short-turnaround, reasonably priced blog or website design. If you realllllly want a blog or site designed with Family Tree or Bee Crafty, we have them available as options. Look for a launch announcement in a couple of weeks! I’m also still available to book for completely customized site or blog design.

I also wanted to say thanks to the amazing, wonderful community of women who have been so supportive and inspiring. When I first released Family Tree (back in 2010), there weren’t really any themes by and for women out there. Almost three years later, there’s a whole community of women theme designers working with the Genesis framework. It’s been so awesome to watch! I can’t wait to see what they do and how much they push the boundaries in the future.

And, of course, I owe a huge debt of gratitude to Brian Gardner for taking me on this wild ride. I was a huge fan of Revolution (and Revolution 2) themes. I started building Family Tree 1.0 on an alpha version of Genesis, and haven’t used another theme or framework since. To see how far it’s come (and how much it has taken over it’s market) has been amazing. Brian has introduced me to people and experiences that anyone would consider themselves lucky to have. As a huge bonus, he became a good friend. I’ll miss working with him as closely as I once did, but can’t wait to start flooding the gallery with new client designs.

For now, though, I’m just going to jump into our first Simply Customized design– a whole new look for nerdgap.com. Look for it next week!

I have to admit, I wasn’t expecting much when I the clicked “Buy Now” button on the CSS Hat web site.

I’ve seen scores of other companies try to address the problem of PSD to CSS conversion, and so far hadn’t found one that put out code that was up to my standards. But CSS Hat came recommended by the OCWP group, and those folks really know their stuff, so I figured I’d give it a shot. It seemed like it would be worth a $30 gamble if it really did what it said it did.

After trying it out for a bit, all I can say is holy cow, does it deliver! I was able to translate the image-based submit button a client has been using into pure CSS in less than 5 minutes. Sure, I had to tweak a couple of rules and add a couple of others, but all in all, it saved me probably 10 minutes of typing in code, searching CSS Tricks for how that border-clip thing worked again and visiting a CSS3 shadow and gradient generator.

So what is it supposed to do?

I think CSS Hat shows their benefits, the best, so I snagged a screennshot of what features convinced me I needed this tool:

Basically, You’re supposed to click on any layer using layer styles in Photoshop (CS4 or above) and CSS Hat displays the CSS that will translate the effect to the browser. It even has options for LESS, SASS and a few other preprocessors. You can also choose to include comments, vendor-specific prefixes, a fixed width and height and the ability to automatically name the rule based on the name of the layer.

Installation

CSS Hat was a breeze to install. You just run the .exe file. I especially liked the personal message on the installer screen ;) Nice touch, guys!

Making my button

To open the CSS Hat window, you’ll need to open Photoshop and go to to Window → Extensions → CSS Hat option. Your new CSS Hat window should now be visible.

Next I opened up the PSD document I created for a client. I wanted to see how easy it would be to convert a Submit button that they’ve been using as a graphic into pure CSS so I can adjust the size more easily.

Next I selected my Move tool, making sure the “Auto Select Layer” option is checked. This will let me select any layer just by clicking on it.

Once you’ve clicked on the layer, look at the CSS Hat window. Bam. All of the CSS you need to re-create the graphic with CSS. I haven’t tried LESS or SASS yet, so I stuck with plain old CSS for my test. I did select the option for browser-specific prefixes, though.

The Code

I had to generate CSS for two elements—the button base and the button text. This is the code CSS Hat generated for the button base:

border: 1px solid #f60;<br />
-moz-border-radius: 5px;<br />
-webkit-border-radius: 5px;<br />
border-radius: 5px;<br />
-moz-background-clip: padding;<br />
-webkit-background-clip: padding-box;<br />
background-clip: padding-box;<br />
background-color: #000;<br />
-moz-box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);<br />
-webkit-box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);<br />
box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);<br />
background-image: -moz-linear-gradient(bottom, #ff5400 0%, #ff5400 25%, #fea00f 90.16%, #fea00f 100%);<br />
background-image: -o-linear-gradient(bottom, #ff5400 0%, #ff5400 25%, #fea00f 90.16%, #fea00f 100%);<br />
background-image: -webkit-linear-gradient(bottom, #ff5400 0%, #ff5400 25%, #fea00f 90.16%, #fea00f 100%);<br />
background-image: linear-gradient(bottom, #ff5400 0%, #ff5400 25%, #fea00f 90.16%, #fea00f 100%);<br />

And this is what it generated for the text:

color: #3d3d3d;<br />
font-family: "Myriad Pro";<br />
font-size: 18px;<br />
font-weight: bold;<br />
text-shadow: 0 1px 1px rgba(0,0,0,.75);<br />

I created a quick HTML document to test out the styles. I created a class called “button” with the above CSS attributes and applied it to the following html code:

<a href="#"><div class="button"> Submit &raquo;</div>

This is what I got when I previewed the code:

We’re not 100% there, but really, we’re not that far off. The first thing we need to take care of is the fact that the button spans the whole width of the browser. To take care of it, we add the following to our .button rule:

display: inline-block;

Next I added a little bit of padding. I used my marquee tool and Info panel to determine the padding and added this:

<br />
padding: 8px 25px 9px;

If you measure the button, though, the padding is larger than we’ve set it. That’s where Bill Erickson’s Most Useful Code Snippet Ever (™ me) comes in handy. This little nugget of awesomeness keeps box elements from adding padding and borders to the overall width of a box.

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

Our button base is ready to go now!

The button text

The last thing to fix are two minor elements of the button text. First, the color is obviously wrong. It’s easy to change the color from

color: #3d3d3d;

to

color: #fff;

To make sure there was equal padding around the text, I also added

line-height: 1

Finally, because CSS Hat can’t generate CSS based on blend modes, I need to change the color of my text shadow. I simply used my eyedropper tool to select the red-orange I wanted, noted the RGB values in Photoshop, and changed

text-shadow: 0 1px 1px rgba(0,0,0,.75);

to

text-shadow: 0 1px 1px rgba(255,42,3,.75);

That’s it!

Here are our two buttons side by side.

If anything, I think the pure CSS button looks cleaner than the graphic. And when I want a nice, huge CTA button, I can swap a font size and padding values instead of creating a brand new graphic. I’ll definitely go in and add Typekit so I can use the correct Myriad Pro font and give it a little bit of typographic love, but otherwise, I’m a pretty happy camper.

In short, CSS Hat did exactly what it said it would do, simply and elegantly. It doesn’t try to do too much–either. It’s intuitive and is one of those rare tools that gets out of the way and does what it’s supposed to. I have a feeling that this is going to become a huge workhorse in my development cycle.

Have you tried CSS Hat (or another tool) for making your life easier? Share it in the comments so I can try out some new toys!

November started off with a lot of momentum on the blogging front.

I’d written two whole posts in one week (wooo!) about web font services with a calendar of post ideas that went out a couple of months. I’d even joined a blogging challenge Facebook group with the goal of publishing 30 posts in 30 days.

And then it all went sideways. I know they say the only constant is change, but seriously. Here’s an overview of what went down…

New Host

The first of the major November changes was moving to a new host. I woke up one morning to several emails in my inbox letting me know that every single sales/product page in my site was 404′ing. After some back and forth, I decided my best bet would be to move one of my own backups to a new host–WPEngine. Fortunately, WPEngine has some seriously amazing documentation, and moving the site was a breeze. When I did run into (small) issues, their support staff was friendly and helpful. And their dashboard and admin tools are just amazing. The best part so far has been the staging area, where I can try out theme edits and plugins before I move them to the live site. That may change when I figure out how to use their new GIT functionality, though. That looks super cool. Overall, I’m actually glad my site went down, since I’m so thrilled with the service.

Woman Down

Right in the middle of the above change, we had a more personal one. My sweetie and I were taking a roller derby exercise class. Basically they teach you all of the different drills (we even got to do a whip, which was *awesome*), but nobody tries to body slam you into a wall (at least on purpose). The class was maybe halfway over and we were working on this turn where you drop to one knee and bring your outside skate around so you do a 180. Then I heard a crrrrrrunch and a yell. Long story short, my sweetie had surgery the next morning to put her ankle back together with a plate and 8 screws. Turns out she’d broken all three bones in her ankle. I didn’t even know you *had* three bones in your ankle. Amazingly, only a month later she’s in a boot, on crutches and moving her ankle.

End of an Era

I’ve been selling my Genesis child themes at StudioPress for three years now. I’m really proud that Family Tree and Bee Crafty have been a part of the StudioPress store and ProPlus package. However, due to some recent changes over at StudioPress we’re moving Bee Crafty, Family Tree and RealPro to our own store. We have a spiffy new Zendesk support system set up, and you’ll be automatically added to it when you purchase any of our products. We’ll also have a few new coupon codes to celebrate the change!

Simply Customized

The last change of November was deciding to dip my toes back into doing theme customizations for clients again. After a year doing nothing but theme support and development, I realized I really missed the challenge of solving problems for clients. So in January of 2013 we’re launching another new service called “Simply Customized”. We’ve pinpointed the six major elements in a Genesis theme that have the most impact. By only changing those elements, we’re able to deliver a Genesis web site or blog design in a much shorter time frame on a smaller budget than traditional custom designs. We’ve got an interest list set up if you want to receive updates and have early booking access.

Here’s hoping that December is a little less eventful than November :D

Of the three services I’ll be reviewing, Typekit is my absolute  favorite.

It’s also the only one that isn’t free. Usually, when I suggest Typekit the most common response is “Why should I pay to use web fonts when I can use something free?” These are the top five reasons I keep renewing my Typekit Portfolio plan:

1. Typekit features professionally designed typefaces

Because Typekit has been so dedicated to “offering a level of protection that the type industry needs” they have been able to form partnerships with foundries including Adobe (who acquired Typekit in 2011), FontFont, P22, Typodermic and Veer, among others. That’s something a free solution just can’t offer.

2. Typekit is dedicated to optimizing their fonts

One of the main benefits of using a commercial typeface is that many of them have been carefully optimized and hinted for screen display. If you’ve ever seen a Google font go all wonky on you, it’s because it hasn’t been hinted for screen display. In a nutshell, fonts for print are made up of a bunch of mathematical equations so the font is smooth no matter what size it’s printed. On a screen, though, you have to convert those equations into pixels. In the translation, you sometimes get weird, lopsided, blurry or pixel-y results.

Hinting is what tells a font to adapt the equation based on the pixel conversion, so the type displays the way it’s supposed to on a screen. If you’re interested in learning more about about web type rendering and how font rendering and hinting work, Smashing Magazine has an awesome article that will make you feel like you just earned a PhD in web font rendering.

Typekit also displays screenshots of each font in all major browsers on OSX, Windows 7, Windows Vista, Windows XP and Ubuntu. It lets you preview actual samples from a live site of a typeface you want to try out without the hassle of having to set up a test page (or have a Mac, PC and Linux box all running at the same time).

Bottom line, a wider variety of fonts display better at more sizes, and you can make sure they aren’t all janky before you use them. That’s one of the biggest perks for me.

3. Typekit has a wider variety of font weights

If you select Styles > Show all styles and browse the Google font library, you’ll find a few fonts with multiple styles and weights, but an awful lot of them come in one style only. It makes it hard to set any visual priority in your content when you don’t have at the minimum normal, italic, bold and bold italic weights. I think that’s crucial for making content easier to read.

Some Typekit typefaces have up to 14 weights and styles, all the way from from thin through heavy in both normal and italic. The best part is you can specify the weights by using a value from 100 to 900 in a stylesheet rule. Add an <em> tag and it’s italicized. Fast, easy, and if your fonts don’t load, the weights and styles will be applied to the next font in the stack.

4. Typekit has amazing search filters

I spend waaaaay to much time choosing the *perfect* font for a project. That means one of the things I love most about Typekit is the elegance and usability of their search engine. If I’m looking for a heavy sans serif with a medium width, tall x-height, low contrast and uppercase numbers that works as a paragraph, I just click a few options and every available font is searched and sorted for me. Fewer choices mean I spend less time scrolling through page after page of fonts.

5. Typekit makes it easy to deal with FOUT

If you’re not familiar with the term FOUT, it stands for “Flash of Unstyled Text”. If a web page loads in Firefox (the only browser that does this) before the font information does, you may see a brief flash of the fallback font before the web font takes over. That means instead of the humanist font Myriad Pro you’ll see plain old default Helvetica for a second. If you’re using Typekit, it’s easy to control with a little bit of CSS.

Typekit uses something called “font events” to allow you to control how fonts display. Depending on the current load status, Typekit will add a class of .wf-loading, .wf-active or .wf-inactive to every selector that uses a Typekit font. If you want to hide a font while it’s loading, you just need to add something like

.wf-loading {
	display: none;
 }

That will hide anything that has a .wf-loading class applied to it. Once the .wf-loading becomes .wf-active (meaning the font has loaded), it will display.

Now Firefox will act like every other browser out there (including IE) and hide the content until it can display the way you intended. Controlling FOUT is just the tip of the iceberg when it comes to font events. If you’re interested in learning more there is a great four part series on the Typekit blog.

What’s not so great

Nothing is ever perfect, including Typekit.While I think the benefits outweigh the limitations, you definitely want to consider them when evaluating a solution. Typekit isn’t the right tool for every job.

Four reasons to consider using another option

1. Ease of Use

I have two themes available in the main StudioPress store—Bee Crafty and Family Tree—and both were built using Typekit.

I would say maybe 15-20% of the support questions I get relate to integrating Typekit into a Genesis theme. I plan on converting both themes to Google fonts, because they’re a lot easier for people who aren’t professional web designers and developers to integrate. Although I have to sacrifice some choice and quality, ease-of-use is a bigger consideration in commercial theme development.

2. Kit Publishing Delays

Typekit has you create “kits” of the fonts you’re using on a web site. When you make changes, you have to publish it before you can see the results on a live site. This can take several minutes to complete. It’s kind of a hassle to keep reloading a page until you can view your changes.

3. It’ll Cost You

Typekit has a free subscription level, but it’s pretty limited. You can only your kit on one website, and use a maximum of two fonts. You’re also limited to fonts in the Trial library, so your choices are pretty limited. At the time of writing this, there were only 211. The full library contains over three times the at 776 typefaces to choose from.

4. You still have to buy the font to use anywhere else

If you also need the font to use on business cards, brochures, packaging or Photoshop mockups of your site, you can’t just download the font. Typekit basically rents the fonts to you for use in a specific way. Anything else is gonna cost you. Some premium font families can cost hundreds of dollars. Suddenly your $50 a year subscription has turned into $550 to use the font on any other marketing materials.

Typekit does let you serve fonts from your subscription if you’ve purchased your font through FontFont, Process Type Foundry or ArsType, but you’ll still have to pay for it. And if your client has an existing corporate font isn’t in any of the subscription plans or made by one of those three foundries, you’re SOL.

No matter which service you choose, you should evaluate the pros and cons and choose the best solution for your project. The best solution is the one that fits your needs.

Next Up: A review of Adobe Edge web fonts.
Or you can read our introduction to the series.

I’ve been madly in love with type since my very first year of design school.

I collected fonts from my first service bureau job on floppy disks, downloaded free fonts that took all night on my 1400 baud per second modem, and idolized Margo Chase, Erik Spiekermann, Neville Brody and David Carson. I’d definitely consider myself a typophile.

That’s why one of the hallmarks of the design style at Creativity Included is typography. We try to carefully craft our type to be clean, simple, and easy to read (which is ironic considering our David Carson infatuation). And since web fonts are finally a viable option for setting type, our options have expanded in ways we only dreamed of when I first started building web sites.

Since the advent of @font-face, a lot of services dedicated to hosting and serving web fonts have sprung up. Before they came on the scene, it was a pretty involved process if you wanted to use a web font. First you’d need to generate a variety of font formats for different browsers. Next you’d upload all of the files to your server. Then you could go ahead and add the font to your stylesheet. Finally you’d upload the stylesheet you created. There had to be an easier way.

That’s why tools like Typekit, Google Fonts and Adobe Edge Web Fonts were created. If you’re new to web type, you might be a little bit overwhelmed at your options. You want to know which one is the best solution. So over the next several days I’m going to review them. These are the services I personally use for hosting and serving web type in themes and client sites. As a bonus I’ll also cover the old school way of adding a web font manually, like I did on the Creativity Included web site.

Next Up: Why buy the cow when the milk is free? A review of Adobe Typekit.

I’ve been reading a lot of design books the last couple of weeks, and thought it might be fun to take a few of them and have a little fun with typography.

Almost every project I work on is geared toward learning something new, putting out a new product or writing documentation that sometimes I forget why I fell in love with this business.

So, I’m going to sit down a couple of times a week, open up my Kindle to see what’s inspired me, dig into my non-Google-friendly fonts (oh, commercial fonts, I have missed you so) and play…

I love this quote by Paul Rand. He’s one of my favorite designers of all time, so I wanted to use type he’d approve of. I went with Bodoni Poster because it’s reminiscent of a lot of his advertising work, and Berthold Akzidenz Grotesk because I just couldn’t bring myself to use Helvetica.

I know it’s practically a sin for a designer to admit that, but I just can’t get behind that font. I absolutely *loved* the documentary, but I won’t use the typeface unless a client makes me. Once, when one forced me to, I made a “Helvetica Sucks” desktop pattern in protest. The design police will probably come take away my license to practice now, lol!

I was reading this article by the hilarious and talented Speider Schneider this morning about using free WordPress themes to build portfolio sites for designers, photographers and other creatives. I started putting my response into the comments, but it turned into a book pretty quickly, so I moved it over to the blog instead.

He has a lot great points in the article about why WordPress as a content management platform is a good idea for designers. I’m a huge propenent of traditional designers moving to the WordPress framework because I’ve personally found it to be an invaluable tool in designing for both myself and clients.

I completely agree with what he says about building for your users and not the client or other designers, why an awesome plug-in architecture makes WordPress so powerful, and how in a perfect world the best sites are created by a team of people with expertise in everything from coding to copy writing to branding (although let’s face it…that team is usually you, a thesaurus and a crapload of internet tutorials to help you fake your way through the stuff you don’t know).

But the idea of using a premium theme (or, even better, a premium theme framework) is a single throwaway line about how they’re available. As someone who has worked with WordPress for a few years now, I would *strongly* recommend coughing up a few bucks for a commercial theme framework when it’s time to build your professional portfolio site.

My framework of choice is Genesis by StudioPress. When I was starting out with WordPress I tried pretty much every theme company out there, but after using Genesis on a few projects, I decided to use it exclusively, because it was the best one I’d tried. I could develop a Genesis site in about half the time it took for any other framework, and I could do a lot more with it.

“Sure!”, you’re probably thinking. “You frigging *make* Genesis themes…of course you want to sell me on them!” But take a look at the list of features, and then decide if $80 (or around $350 if you want an unlimited commercial license—that’s what, two billable hours at agency rates?) is worth a product with a list of features that, frankly, kick a free theme’s ass.

Support. When you purchase a commercial theme framework, you’re also purchasing access to the developer who made it. Bug in the theme? Something not working right? Log in to the support forum! Chances are someone has already asked your question. If it’s something really weird, you can submit your own ticket. There’s even a free eBook for absolute beginners walking you through everything you might ever want to do with Genesis. On free themes, there may be support…but then again, there may not be.

A huge community of users. Genesis has thousands of users. Users who develop child themes, write tutorials, create plug-ins and participate in the support forums.

Child themes. A theme framework allows you to create a custom child theme instead of editing PHP files directly. WordPress updates and a core function doesn’t work anymore? No problem, just update the core and your edits stay in place. You’ll never hose your whole site with an update. Even better, there are dozens of ready-to-go child themes available through StudioPress and community members. Want to make something entirely custom? You can do that too. If you’re not a coder, put a PSD together and have someone like Bill Erickson work his magic on it. One of my favorite features of Genesis is that there are limitless design possibilities.

SEO. Genesis is search engine optimized out of the box. You can tweak settings on a per page basis. Customize your doctitles, tweak your meta tags or enable cononical links from your WordPressdashboard. Genesis has also been fully search optimized by Greg Boser, partner and SVP of search marketing powerhouse BlueGlass Interactive.

Frequent Updates. Genesis is constantly keeping up with improvements made to WordPress. WordPress introduced custom headers and backgrounds, and they were immediately added to the Genesis framework. Responsive design comes to 2011? All new Genesis child themes are responsive, as well. With the exception of having to update a few lines of PHP code until a patch was released, I’ve never had a WordPress update take out a Genesis site.

Security. There are no guarantees that your free theme is secure. Or that when a security hole is found, anyone is going to fix it (or even notify you about it). Genesis has been built according to WordPress security best practices. Heck, it’s even been audited by security expert and core WordPress developer Mark Jaquith.

You just can’t get all of that from a free WordPress theme. Heck, a lot of times you can’t even get all of that having a site custom built for you. In the end, I think it all comes down to the amount of professionalism you want to show in your portfolio site. Your website is often the first impression you make on potential clients. You wouldn’t hand someone a free business card from VistaPrint at a Y Conference, so why would you use a free WordPress theme to present your best work to the public?

It’s late and I’m tired, so let’s just say it was awesome.

I think the best part is getting to hang out with people you wish worked down the street from you. It’s awesome to be surrounded by people who fly the same freak flag that you do. If it wasn’t so frigging exhausting, I’d wish there was a WordCamp every weekend.

The main reason I’m posting is to get my slides up, though…I went old school with a plain old PDF, so they’re easy to open. You can download them here.

We knew there was a lot of Genesis talent out there, but man, we were overwhelmed by just how much we saw!

The level of design, development, illustration, logo design, marketing and copywriting talent we saw was amazing. After a lot of thought, we’ve selected ten members who demonstrate a huge variety of skills.

We’d like to thank everyone who participated…if you didn’t make it this round, we will have another recruiting session in September to add to the team. We’d love for you to expand your portfolio and enter again when you’ve had a chance to see what skills and styles of design we’re be featuring. So, enough stalling. Let’s introduce the All Stars!

*The team is in alphabetical order by first name

Angelica Suarez, Market St. Stamps

marketstreetstamps.com

I just totally fell in love with the Computer Cutie illustration Angelica submitted to us! We’re in love with her backgrounds, too. I’m *so* excited to get an illustrator’s perspective on blog design—hopefully we can get some stamping-inspired Genesis design happening!

Christopher Cochran, WebDev Studios

christophercochran.me

Christopher Cochran really needs no introduction – he’s a Genesis legend. Not only is he author of the indispensible Genesis Visual Hooks guide (among other WordPress plug-ins), he’s also an all-star designer at WebDev Studios, curator of a bunch of super-useful Genesis tutorials, apsiring chef, and all around nice guy. He clamis he dreams in code…when he actually sleeps.

Courtney Kirkland, Media Mom Creative

courtneykirkland.net

I’ve been watching Courtney’s work for a while, and have been really impressed with how far she’s come with Genesis in such a short amount of time. I especially love her color palettes! I expect to see some really great things from her!

Heather Jones, Viva La Violette

vivalaviolette.com

We almost fell out of our chair when we saw what Heather Jones had done with Family Tree over at Viva la Violette. She’s a recent Genesis convert, but we see sooooo much potential in her. This is someone you’re going to be seeing a lot of in the future—she’s got skills!

Jessica Barnard, The Pixelista

thepixelista.com

We think Jessica is the bees knees. She’s not only a great designer, she’s just an all around great person, and I’m really looking forward to collaborating on a Pinky and the Brain-style global takeover with her. Her first theme in the Marketplace is amazing–we can’t wait to see what else she has in store!

Lindsey Riel, Pretty Darn Cute Design

prettydarncute.com

Lindsey is another well-known Genesis designer. Her Modern Blogger theme has been a best seller in the StudioPress Marketplace, She’s the designer of the super-popular (and often emulaeted) TomKat Studio site. Her designs feature a signature use of bold colors and patterns–you know when something is Pretty Darn Cute when you first see it ;)

Ruth Harding, Windmill Words

windmillwords.com

I came across Ruth’s amazing work when she sent me a support ticket for a makeover kit. As soon as I saw the site she was working on, I knew she’d be a perfect addition to the team. Her illustrations are adorable, and she is an *amazing* writer. She offers virtual assistant, editing and proofreading services as well. I’m excited to hear what she has to say about the business side of blogging!

Shannon Dow, EightCrazy Designs

eightcrazydesigns.com

Shannon is a fixture in the Genesis design community, and we’re so glad she’s a part of the team! I’ve admired her work for a couple of years now. Her Genesis Marketplace themes are as amazing as her customizations! You always know you’re going to get something amazing from Shannon!

Susan Nelson, Auxano Creative

auxanocreative.com

The first time I saw Susan’s work I was just, like, “WOW!”. She does such beautiful work The fact that she does it on Genesis is just a bonus. We can’t wait to see what she’ll be doing next! Her personal site and two StudioPress Marketplace themes are fresh and fun with a focus on type–our favorite combination!

There are still two people we invited who didn’t respond with a confirmation by our deadline…so we may be adding a member or two if they get back to us in the next few days. Anyways, we hope you’re as excited as I am to see what this talented team has in store—we have a feeling Genesis isn’t gonna know what hit it ;)