Saturday, November 22, 2014

How to Create Your Own Font Using Illustrator and Glyphs App

I have a very strong urge to write a post that would be dedicated to my love of typography and how creating my own font has been on my bucket list for years. Then I'd tell you that I sucked it up and finally dove in and I created my own font and it was bumpy and took a while, but I did it.

Welp, all of that did happen, and I'm extremely excited about it! But instead of my verbose and overly emotional post, I published a brief post earlier this week with a link to the free download.

Now, I'm going to help YOU learn how to create your own font and save hours of research and speed bumps. I spent a whopping 9 hours on this first font from sketch to export, and when I make fonts in the future it will take significantly less time, and I hope to save you time as well.

How to create your own font using Illustrator and Glyphs app - Tutorial on HelloBrio.com

Overall, here are the materials I used.


Sketch Each Glyph of Your Font


Because this was the first font I've ever done, I wanted to create something doodle-y that would fit in with my illustration aesthetic and would also be relatively quick to draw up and design.

I used graph paper, keeping in mind that my font would have 4 equal heights for the ascender, x-height, and descender.

I drew each letter carefully, redrawing letters and characters that I wasn't happy with.


Sketch each glyph of your font - How to create your own font using Illustrator and Glyphs app - HelloBrio.com

Redraw characters you aren't happy with - How to create your own font using Illustrator and Glyphs app - HelloBrio.com

Keep in mind your ascender, x-height, and descender - How to create your own font using Illustrator and Glyphs app - HelloBrio.com

It's up to you how many symbols and other characters you want in your font. I went back later and quickly added some special symbols.

Add in a bunch of extra symbols - How to create your own font using Illustrator and Glyphs app - HelloBrio.com

Scan and Digitize Your Work in Illustrator


After you have a set you're happy with, scan in your work. Sometimes even seeing it on the screen versus on the piece of paper can help you see which glyphs you need to redraw.

Depending on your preferred workflow, you may want to set up your Illustrator file in advance (next), or perfect your glyphs first. I prefer vectorizing first so you don't get caught up with bounding boxes. You can always make other tweaks later.

After you have your work scanned in, follow my steps for using Image Trace in Illustrator to get your glyphs to be individual vectors. Here's your chance to also clean up your work and smooth some bumpy lines with a tablet (follow these tips on how to use your Wacom tablet to smooth your work quickly).

Also, make sure to group each letter (especially those lower case i's and j's).

Set Up Your Illustrator File for Glyphs App


To make the transfer to Glyphs App easier later, it's best to set up your Illustrator file so that you can quickly copy and paste each glyph.

To do this, I found this video which helped me immensely. To set up your Illustrator file:

  1. Create one new file that is 1000x1000px
  2. Set your grid lines to be 100px with 4 subdivisions
  3. Each letter will be no more than 100px square, so each major block will be space for one letter. Move each letter to line up with the correct grid subdivisions. Set up your Illustrator file so that each grid line will have a different meaning from beardline to x-height to ascender and more - How to create your own font using Illustrator and Glyphs App - HelloBrio.com
  4. Repeat until your letters are positioned correctly.position each letter in your Illustrator file precisely - How to create your own font using Illustrator and Glyphs App - HelloBrio.com
  5. Draw a 100x100px box around each letter (no stroke or fill value). Use the move and copy tool (CMD+SHIFT+M) and repeat tool (CMD+D) to make sure each of these boxes are precise.
  6. Group each letter with its bounding box.
  7. Use the align tool to move all of your letters to the top-left position (so each corner lines up at 0,0)
  8. Select all of your items and then use Release To Layers (sequence) in the Layers window drop down.
  9. With all of your letters selected, resize them to 1000x1000px. Now each individual letter with its bounding box is on its own layer.
  10. Move up all of your letters and their bounding boxes up 750px (by typing -750px in the y axis field) to make it easier to copy and paste into Glyphs App in the next step.
  11. Save and open Glyphs!

Move Your Characters into Glyphs App


Now here comes the easier part. It's still a little tedious from here out but you're very close to finishing.

In Glyphs, set up your file (File → Font Info) so all of your glyphs are 1000 units per Em, and so your measurements are set up as so:

Glyphs Font Settings Ascender 750 Cap height 500 X-Height 250 Descender negative 250 - How to Create Your Own Font Using Illustrator and Glyphs App - HelloBrio.com

Add all of the numbers, symbols, and other pieces you want into your collection. When you're ready, start adding characters individually by double-clicking the character in Glyphs and pasting the character in from Illustrator.

After you paste from Illustrator, double click on the bounding box in Glyphs and delete the bounding box.

Copy each letter from Illustrator - How to Create Your Own Font Using Illustrator and Glyphs App - HelloBrio.com

Paste each letter into Glyphs and delete the bounding box How to Create Your Own Font Using Illustrator and Glyphs App - HelloBrio.com

Open and close each letter and symbol until you've copied and pasted each glyph from Illustrator.

When you're done, highlight all of your glyphs in the app (CMD+A) and change the LSB and RSB (left and right side bearing) in the bottom-left settings.

Export and Test Your Font


Export your font and dump it onto your desktop. Install it like you would any other font and play around with it in Photoshop and Word or similar applications. Take note of any letters that need to be moved or if one set of characters needs to be kerned differently.

At this point in the game, I was pretty excited. And I made this very boring-yet-fun image to post on Twitter:



Congratulations, You Made Your Very Own Font!


By this point, you may have your very own font! Things can only get better from here.

If you've never made your own font before but have been wanting to, I highly recommend just diving in. Get the first one "out of the way", per se, which can help you learn the workflow as well as learn things for future font design.

Make sure to download my free font if you haven't already.
Continue Reading …

Thursday, November 20, 2014

Free Hand Drawn Font: Sweet Pineapple

Bucket list item alert! I've created my own font. Finally!

There will be a tutorial on Saturday on how to create your own font using Illustrator and Glyphs App.

Until then, make sure to grab your copy: my font is now available for free on Medialoot.

Free hand drawn serif font by Jennifer Coyle for Medialoot - HelloBrio.com

This was beyond fun. Look for more fonts from me soon.
Continue Reading …

Tuesday, November 18, 2014

How to Charge Your Clients for Creative Work

How to Charge our Clients for Creative Work - Freelance and Business Advice on HelloBrio.com

Recently, Sarah asked in the comments of a post:

Do you happen to have a post on how to price out commission works for clients?

I asked Sarah what type of work she does:

I work in production at a custom wedding/event business but recently I just hand lettered an entire invite suite (invite, guest info,RSVP) plus envelopes addresses, and then I also do seating cards, table numbers, food signs etc.

There are a couple of things to consider when charging your clients for creative work with deliverables (gah, what a corporate-y word, I apologize), whether it's digital or products for an event like a wedding, etc.

Things to consider


  • Your expertise.
  • How long you think it will take you.
  • How much materials will cost.
  • If you need to live off of this money.
  • How much others in your industry are charging.

These are all things that you need to take into account when you quote a client.

Most of my freelance client work is for websites and blogs, so I will only touch on cost of materials, but can say that any expense you have for your business (even if it's for computer design software or an invoicing service), you also need to factor those into your cost of materials.

I'm going to work backwards in the scheme of things to consider.

The best place to start is to see what others in your industry are charging

Looking to do calligraphy for wedding envelopes but have no idea where to start? Get networking. Research and see who offers services on their site. If they don't post prices on their services page, send them an honest email introducing yourself and saying that you're just getting started in the industry. While you can't expect a response from everyone you email, you will at least get a couple of emails in return and can go on from there. Keep your first email short and sweet and work to build a genuine relationship with these freelance mentors as time goes on.

Do you need to live off of your freelance income, or do you eventually want to be able to?

Charge accordingly (build in prices for your office space, electricity, monthly bills related to your business, etc). While this may set your prices much higher than folks looking to earn a couple of bucks, this will also subconsciously tell your client that you're serious about your work and where you want to take your craft.

How much will your materials cost?

Also make sure to build this into your price quote. Whether you choose to charge your client on a line-item basis (i.e. saying $10 for ink, and $3 per envelope, and $20 for nibs - I'm shooting in the dark on calligraphic pricing here) or choose to build materials into the lump sum, definitely take this into consideration, as well as your time and gas money spent getting to the store, etc.

How long do you think it will take you?


This item goes hand in hand with expertise. So: expertise. The thing you need to focus on most here is what you can deliver. The beautiful thing about freelance work is that you can learn a lot while on the job. If you really don't feel comfortable charging your client on an hourly basis because you know you'll be spending a larger proportion of time practicing or perfecting your workflow, then charge a flat rate. More on this below…

Value Based Pricing


Having charged clients on an hourly rate as well as a fixed project rate, I've often been unsure of which is better. In the beginning when I was learning as I was going, a flat rate was more reasonable for my clients. As I hit my stride, an hourly rate started to seem like a better idea. But now that I've been designing for quite a while, a flat rate is easily the best way to go.

Why? Because of value based pricing. For example: a client may want a website that will literally take you 3 hours to complete. You could charge your normal hourly rate of $50/hour which would be a very reasonable invoice of $150. However — If you charge them $1500, that may seem ridiculous, since you're ultimately getting $500/hour. But that website will generate something that is incredibly valuable to them: the website allows for them to have a branded web presence for customers to learn more about the company and the products they offer. So the value that you're handing them with their website is quite large, and needs to be charged accordingly. (Remember before when I mentioned that this type of pricing will subconsciously influence your level of professionalism?)

If you aren't convinced, listen to Sean McCabe's podcast about this.

Another vague but important thing I've learned along the way: don't send a quote unless it makes you a little uncomfortable to ask for that amount of money (especially if it's comparable with the research you've done).

Closing Thoughts on How to Charge Clients


The biggest takeaways:

  • Do your research and network
  • Think about where you want to take your freelance business
  • Think about how you want to be perceived

Getting started with pricing feels scary, but doesn't have to be. The right client will be flexible with you and will understand if it's your first commission. I've had clients come back to me saying that they wished to pay me more, or that the quote was too high. Again, the right client will work with you, because they are interested in what you can deliver.

How do you charge clients? What advice do you have for pricing?

Continue Reading …

Saturday, November 15, 2014

8 Beautiful Examples of Hand Lettering in Wedding Signage

Woo hoo! My dear friend Amy Faith got married to her beau Mike in September, and I was asked by her to do some lettering signage for the wedding. The photographer just published the photos and you can see a peek at the signs I created.

When asked to do these, I thought I had a handle on hand lettering and wedding signage. Well, really, I thought it was limited to invitation calligraphy, but a quick tour on Pinterest will show you that it's become so much more than that.

In today's roundup, I'm going to share some of my favorite hand lettered wedding signs I've come across.

But first, here's the my favorite design that I did for Amy and Mike. I had so much fun doing this for them and would love to experiment with different mediums, like chalkboards, painting on wood, and larger scales.

Wedding Bar Menu Hand Lettering and Calligraphy - Beautiful Examples of Hand Lettering in Wedding Signage on HelloBrio.com

Wedding Bar Menu Hand Lettering and Calligraphy - Beautiful Examples of Hand Lettering in Wedding Signage on HelloBrio.com

Wedding Bar Menu Hand Lettering and Calligraphy - Beautiful Examples of Hand Lettering in Wedding Signage on HelloBrio.com

Wedding in Calligraphy by Kristina


Wedding Directional Sign in Calligraphy - Beautiful Examples of Hand Lettering in Wedding Signage on HelloBrio.com

White calligraphy on a dark wood sign is clean and striking. This sign is a perfect example.

Almost There from Style Me Pretty


Almost there wedding signage - Beautiful Examples of Hand Lettering in Wedding Signage on HelloBrio.com

Style Me Pretty posted this Almost There sign. While it's a basic sign, the rustic wood and sunshine marbled paint has a youthful charm to it.

Wedding Party Chalkboard by Chirology


Wedding Party chalkboard - Beautiful Examples of Hand Lettering in Wedding Signage on HelloBrio.com

This beautiful sign by Clara blends traditional and non-traditional wedding lettering to create an amazing chalkboard hand lettered program.

Colorful Signs


Colorful Wedding Directional Sign - Beautiful Examples of Hand Lettering in Wedding Signage on HelloBrio.com

And on the other hand, while the white-calligraphy-on-wood aesthetic is really popular, I love to see when couples inject their personal style into signs. This cute, colorful and quirky sign featured on Ryan Ray's photography site is fun and playful.

Painted Calligraphy


Hand painted calligraphic wedding sign - Beautiful Examples of Hand Lettering in Wedding Signage on HelloBrio.com

Hand painted calligraphy like this always tugs at my heartstrings, and the idea to put it on fabric like a scroll is beautiful and much more affordable (and probably much easier to tote around and set up). This was also featured on Ryan Ray's site.

Instructional Signs


Instructional calligraphy wedding signs - Beautiful Examples of Hand Lettering in Wedding Signage on HelloBrio.com

These signs, by Birchtree Catering and photographed by Peach Plum Pear, go to show you how much important information can be portrayed through polite signs.

Escort Cards on Driftwood


Driftwood escort cards - Beautiful Examples of Hand Lettering in Wedding Signage on HelloBrio.com

Wow, perfect calligraphy on driftwood? Talk about a good take-home piece. These escort cards are the epitome of Shabby Chic.

Acrylic Neon Cocktail Menu (and DIY)


Acrylic Neon Cocktail Menu DIY by OhSoBeautifulPaper - Beautiful Examples of Hand Lettering in Wedding Signage on HelloBrio.com

This DIY by Oh So Beautiful Paper is a cool way to create signage that is unique and easy to match to your wedding's color scheme.

Have you come across really great hand lettering in wedding signage? Share your inspiration below.

Continue Reading …

Thursday, November 13, 2014

Home Workspace and Desk Tour

Creative At-Home Desk and Workspace Tour - HelloBrio.com

Early last week, I decided to rearrange parts of my apartment because I felt like a change of scenery would help with productivity. Whether or not that is just an old wives tale or not, I feel like it helped! Before, I had my desk floating in the middle of the room because of the window air conditioner, but since I took that out for the winter I wanted to move my desk closer to the windows again but not directly against the windows because of glare.

So now, having the desk against a wall makes the whole working experience feel more grounded. I've always been the type to want to work and live in "caves" as my mom puts it: small, dark and cozy places. If you're thinking of a dark room with a computer geek glued to the glowing light from her monitor, that's totally me.

I was inspired by Jade's recent desk tour post and wanted to share my new at-home work area. Enjoy!

Overall Workspace


All of the furniture is still the same in my apartment. I just moved stuff around.

This may be the messiest my desk gets. I always keep a clean desk otherwise I can get very distracted or just feel bogged down by stuff.

Creative Desk and Workspace Tour - HelloBrio.com

But when I took these photos, I was in the middle of a project (or two) and wanted to depict what my desk actually looks like at any given time.

Creative Desk and Workspace Tour - HelloBrio.com

To my left, I moved my punctuation collection over a kitchen cart that I had elsewhere in my studio before. It's helpful for me to have stuff that's pleasant to look at and is design-centric, but that doesn't feel overwhelming. (Except sometimes seeing my new ukulele has proven to contribute to my shiny object syndrome.

Creative Desk and Workspace Tour - HelloBrio.com

Desk Storage


I moved around some bins that I had in my desk-specific Expedit to the large Expedit's cubbies that were close to my desk.

I used to be so hardcore about a clutter-free work area that it became unproductive since I'd have to get up constantly to grab something I needed. Having my essentials within arm's reach is hugely helpful, including pens, office supplies, books and sketchbooks.

Creative Desk and Workspace Tour - HelloBrio.com

Creative Desk and Workspace Tour - HelloBrio.com

Creative Desk and Workspace Tour - HelloBrio.com

I hope you enjoyed my desk tour. I'd love to see a picture of your home workspace!


Creative At-Home Desk and Workspace Tour - HelloBrio.com
Continue Reading …

Wednesday, November 12, 2014

Get a Brand New Custom Blogger Template in One Week

As I wrote in yesterday's post, I now have my blog hosted on Blogger instead of WordPress. Revamping my blog on Blogger was incredibly fun, and I loved the challenge of making my Blogger blog look how it did when it was hosted on WordPress.org.

That said, I have open slots for Custom Blogger Template redesigns, each week, through the end of 2014. Would you love to see your Blogger blog completely revamped within one week?

Besides my own site, here are some other custom Blogger templates I've created.

Bubbles and Beauty Custom Blogger Template


Jessica was actually my first client! I love the pretty watercolor effect we came up with paired with the clean sans serif fonts.

bubbles and beauty blogger template custom design

Hello Brio Custom Blogger Template


I'm pretty proud of how this site is progressing since I switched to Blogger, especially the sticky drop-down navigation and large preview images for the popular posts section in the sidebar.

hello brio studio custom blogger template design

The Ranking Premade Blogger Template


The Ranking is a premade blogger template that has done pretty well in my Etsy shop.

hello brio studio custom blogger template design

Little Italy Premade Blogger Template


Little Italy is another premade template that I sell.

hello brio studio custom blogger template design


These are only some the Blogger templates I've created recently, not to mention that I've been doing mostly WordPress templates: see some examples here.

If you'd like a new look for your Blogger blog within one week before the end of 2014, email me to discuss scope and pricing. I will email you a design order form and we'll go from there.

I will be taking on 3 or 4 clients starting December 1, so let's get talking now.
Continue Reading …

Tuesday, November 11, 2014

Why I Switched from Self-Hosted WordPress to Blogger

Whenever you Google "switch from WordPress.org to Blogger", Google always switches the words around. Because no one in their right mind switches from a self-hosted WordPress blog to a Blogger blog, right?

Well, I'm either straight up nuts (which is always a possibility) or I had a list of good reasons.

Why I Switched My Blog from Self Hosted WordPress to Blogger

"But Jenn, aren't you a blog designer?"

As far as blog designs go, I've always talked about how great, flexible and powerful a self-hosted WordPress blog is. Designing and developing in WordPress is a treat, and I have to say that it really gets me going whenever I solve a PHP problem in the WordPress loop. Excuse me while I drift off to geekily reminisce over my PHP triumphs.

Considerations On Blogger Functionality


Back to reality. So, why did I switch from WordPress to Blogger? Ultimately, the blog platform series I published got me thinking about the future of this blog. The main idea of one post was to consider the goals with your blog as well as what components, bells and whistles you may need.

While I had some cool stuff happening on my WordPress blog, I truly wasn't using it to its full extent. I had no plans to try to learn ecommerce in order to set up my own digital goods store, nor did I have any immediate goals to start a reader forum or anything else in that realm of complexity.

Thinking About Cost


Think about the cost difference between a Blogger blog and a Self Hosted WordPress blog

When you break it down, a self-hosted WordPress blog costs about $100 per year, give or take depending on your domain registration and renewal fees, as well as the level of site hosting you purchase. I always register my domain names with GoDaddy and have hosted with HostGator and my bills ran about $150 per year.


  • $25: private domain registration (so I couldn't be looked up through WHOIS), and
  • $120: web hosting through HostGator


Thinking about knocking that cost down to $25 per year was a step in the more minimalist direction.

Thinking About My Other Sites


I have too many other sites

In the past year, I've started a few sites, to say the least. Whether or not I'm still doing things with them, or whether I plan on continuing on with them, is another story.

I played around with a webcomic for a bit. Every once in a while a little Sour Bunny will pop up in my doodles, and she's since become a sort of mascot for Hello Brio. This site is hosted on Tumblr.

I also hopped on the Public Domain Stock Photography bandwagon for a little. I've always taken random pictures of stuff, mostly abstract architecture, only to have the photos sit on my hard drive for eternity. Better to offer them to the public than to have them go to waste. This is also hosted on Tumblr.

Finally, I started a hand lettering and illustration Tumblr. I since have expanded that to be hosted on Squarespace so I could present a decent portfolio.

Tumblr is free, and each site only costs me $25 per year for the private domain renewal.

Squarespace is NOT free, and the added cost caused me to break out my calculator and my budget spreadsheet. (Oh how I wish I still had my TI-83 Plus. Yes, I am a huge nerd.) Whether I will keep this site hosted on Squarespace for the long haul or not is still up in the air, but there are a few sites hosted on Squarespace by folks I trust and admire, and therefore think it is the way to go especially since I have products for sale.

So all in all, budgeting for two hosts (HostGator and Squarespace) made my blog budget sad, so I tightened its digital belt.

Thoughts on Design Limitations


I spent a solid week designing a custom Blogger template that would capture the essence of my WordPress.org blog, and I hope I've done an OK job so far. Doing so also reminded me how much I love designing Blogger templates, too, so that's a huge plus in my book.

While there are a few design limitations, it's important to note that these limitations are only minor road blocks in terms of how a blog looks and functions when hosted on the Blogger platform.

Where you start to run into issues is when you want to add crazy pages and ecommerce and such. But all in all, I love a good challenge, and sometimes the best solutions come from having to work with limited tools.

Would I Recommend Switching from WordPress to Blogger? Plus Some Things to Think About


If your blog is costing you money and you don't use the extra functionality features of a self hosted WordPress blog, then yes, absolutely.

There are some considerations though. I spent quite a while cleaning up things that probably destroyed SEO here and there, as well as backlinks. Some things to keep in mind:

You will lose your permalink structure. Remember how I talked about a clean permalink? You will definitely lose that. While this post may have looked like this before: http://hellobrio.com/how-to-look-like-professional-blogger, it now looks like this http://www.hellobrio.com/2014/10/how-to-look-like-professional-blogger-6.html. And while I could've changed the slug of the permalink, the date is embedded in there.

You will have a hell of a time fixing your images. I'm sure there's a better way to do what I did, but I impatiently ripped the cord and just exported from WordPress and imported into Blogger. Meaning all of my image URL's were mapped to my WordPress site, and once I switched the domain over it meant that all of the images were broken. I was quiet on this blog for quite a while as I manually fixed every. blog. post.

Your inbound links will be broken. Remember that one big pin on Pinterest that someone pinned from your blog, and it went viral? That won't work anymore. It will point to a sad broken page on your new Blogger domain. On a personal note, most of my more popular pins related to the beauty blog posts I used to have on here and have since decided to remove, so I was okay leaving those behind.

Your internal links will also be broken. Back in this post I talked about broken links. Guess why: I had to comb through a ton of blog posts and pages and fix broken links. Mostly because pages are set up like this: hellobrio.com/p/about.html where on WordPress it would've just looked like this: hellobrio.com/about.

Your comments will have to be exported or mapped over. This is a long story with a happy ending, but I will spare you the details. Migrating comments from WordPress to Blogger on Disqus was a nightmare.

After all of that said, I may have completely talked you out of switching from WordPress to Blogger. I don't blame you. But let me make the case. If most or all of these apply to you, then I absolutely recommend going through the process.


  • You want to save money
  • You just want to blog
  • Your audience is small, or
  • Your audience is loyal and will follow you where you go
  • You have hours to dedicate to the process
  • You don't mind losing some inbound links because you're going to continue to make kick ass content and build your audience again


Welp, sorry for what may be the longest post ever. But I really wanted to walk you through my process, warts and all, to let you know why I switched from Self Hosted WordPress to Blogger.

Will I still design sites in WordPress? Absolutely. Will I ever use WordPress.org personally? Maybe. Am I happy in Blogger so far? Heck yes.

I'd love to hear your thoughts in the comments.

Continue Reading …