10 Useful Blogging Websites Every Blogger Should Know

These days, a blogger does much more than type some words into a computer.  You are a multi-tasking, multi-skilled machine, juggling writing, editing, photographing, creating, researching and designing.  Does that sound like you?  Yeah, that’s me in a crazy nutshell.  To help you out, I’m sharing some of my most frequented and useful blogging websites when I’m in my blogging mode.  This means, no, I’m not surfing Pinterest or flipping through the Ikea catalog (again).  I’m looking for ways to make my articles stand out, and learning how to do it myself.  (Although I admit, it does look like I’m just surfing the internet randomly, so says the husband…)

Let’s Talk about Type

I’m a sucker for typography.  If you’ve seen my typebike, you’ll know what I mean.  So here are a few websites to use when you’re looking for that perfect font to dress up your pin-worthy graphic.

#1.  Wordmark.it

This site is AMAZING.  All you need to do is enter in the phrase you want to write and hit the “load fonts” button.  It will then show your phrase in every font you have loaded on your computer.  EVERY FONT.  Go ahead, take a moment and scrape your jaw off the floor.

Now you won’t have keep changing fonts in your image editor to see what it’ll look like; you can see all of them all at once, and scroll up and down as you please while you search for the perfect look.  You can choose dark letters on a white background or black letters on a white background.  You can decide whether you want all caps, all lowercase or a mix.  To be honest, I rarely use those options.  I’m just there with my phrase in hand so I won’t have to manually go through my 1000+ installed fonts.  You read that right, although I think most of those were pre-installed or came with Adobe Creative Suite.  I don’t remember downloading that many.  I wouldn’t have the time to download that many, yeesh.

But hey, this brings up #2, #3, and #4.

#2.  Dafont

Dafont.com is a site where you can download a ton of free fonts.  You can search for a specific typeface, or search by the type of lettering you want, whether it’s serif or sans serif, hand lettered or grunge style.  You can also put in your own phrase to see how it looks in a particular font.  A lot of these fonts are very decorative and many are handdrawn, so it’s not always the best place to search for body text fonts.  Each selection also tells you whether your download is free for personal or commercial use.  The download is easy – you get a zip file with the font file inside.  Unzip, install, and you’re ready to go.

#3. FontSquirrel

This is another free font site, but has a different selection.  I’m sure there’s a lot of overlap, but I found some of the selections here to be a bit less handdrawn and more appropriate for text or headings.  They don’t allow you to enter your own phrase in while searching, but you can once you settle on a particular font.  Sometimes, I open several browser windows, each with a font I’m considering and then I’ll pop between them to compare a particular phrase.  You can download fonts here for local use, and many of their fonts also have a web font license, which you can then you in your website using the CSS @font-face rules.

#4. Myfonts.com 

Moving up in the world of fonts, Myfonts.com is a site that offers typefaces for sale.  These can be classic well-known typefaces from well known foundries (such as Univers or Futura), or specialty fonts from individual designers, like Emily Lime.  You’ve probably seen her work all over the blogosphere…or look up.  Yup, my header is an Emily Lime creation!

Remember, these are paid fonts, so they will include commercial licensing, but it’s best to read through the licensing agreement if you’re looking to do more than use it on a web graphic.

#5. Font Awesome

Because it is awesome.  Fontawesome.com is actually an icon font, with hundreds of variations of popular and not-so-popular icons.  You can download the font, install it in your favorite graphic editor and have tons of icons at your disposal.  The trick is to have the cheatsheet next to you while you work, whether it’s the online version or the downloadable PDF file.

Go into the cheatsheet, find the icon you want and copy the icon.  Don’t copy the code next to it; copy the icon itself.  Then, in your editor, set your mode to Text, and paste your icon in.  If your font is set to something not Fontawesome, you might see a blank or a rectangular box.  Highlight that character and change your font to Fontawesome, and you should see your icon smiling at you.

The great thing is, because these icons are fonts, you can make them in any size, in any color and use them anywhere.  Hint: they’re great for making your own social media icons!

So far so good?  We’re only half way through, so let’s continue with the goodness!

Design Your Own Graphics

If you ever make images for your site or even add watermarks to your photos, then you’re making your own graphics.  Here’s a few sites to help you out!

#6. Ribbet 

You may have heard of a little thing called PicMonkey.  Yes, no?  It’s a great tool, but you have to pay to access the premium features.  Granted, the fee isn’t obnoxious in any way, but what if you could get a lot of the same features for free at Ribbet?  They are offering their premium membership for free, and have for the last 2 years, so signing up with them won’t hurt; it’ll just give you an extra tool to keep in your blogging handbag.

I like that Ribbet lets you store images with them, so I can upload designs and have them ready for re-use whenever I want.  I love their overlay feature, which I used to create my social media icons a while back.  They have lots of different collage features, and you can use your own fonts, just like in PicMonkey.  I use both PicMonkey and Ribbet and switch between the two depending on what I’m working on.

#7. Canva 

Canva is a tool that helps you create graphics.  Pick a set or custom canvas size and just start designing!

They have a ton of free frames and icons and banners and shapes that you can use, or you can purchase stock images directly from their service.  Unfortunately, I don’t think they import your own fonts, but there’s plenty of nice solid fonts to choose from.  I haven’t explored all of Canva and their graphic offerings, but I often use them to sketch out an idea because their drag n drop is so easy to use.

It’s Code but Don’t Sweat!

I know many people start getting clammy hands and seeing stars when someone brings up code.  Even more so when it means going into the backend of your blog and editing files.  But never fear!  These two websites are clear, concise, and not scary at all.

#8. W3 Schools 

Admit it, sometimes, you don’t want to pay someone to make that tiny adjustment on your site.  You just want enough knowledge to be dangerous…as long as your site is backed up.  Well, w3schools.com is where I get so much of my “enough to be dangerous” fighting skill.  They have these pages on everything CSS and HTML under the sun, and each tutorial is short and easy to understand.  It’s like my Unix textbook, where it gives you a command, all the options for said command, and examples on how to use it.  Plus, they give you an opportunity to try the code yourself in their interactive boxes.  Why test it out on your blog when you can test out a function on w3schools?  So, the next time you want to change the font of this ONE word, or change the color, or adjust the alignment of a line of text, w3schools will probably be able to tell you how.

#9. my.Studiopress.com/snippets 

Here’s another great resource for some light coding, and it’s free to the public!  You don’t need to have bought anything from Studiopress (they make Genesis) to look through their tutorials, but you do need to be running on a self-hosted WordPress site.

There’s lots of goodies here, especially the oodles of php code that you can add to your theme’s functions.php file.  I love that they give you the entire code snippet which you can just copy paste and then change the words to what you want.  Think of all the things you can do to customize your site the way you want, all by yourself!

On the Move

#10. Screenfly 

This site isn’t about design or typography or coding.  It’s just a handy dandy little tool that shows you what your site’s mobile responsiveness looks like.  I know there are other sites out there that do this, like the Studiopress version, but this one is my favorite, and the one I find to be most accurate.  Plus, there’s so many device options and the user interface is easy peasy to understand.  Pick a device, whether it’s a full size computer, laptop, tablet or phone.  See it in portrait orientation, or landscape.  Make a change?  Refresh it and your changes show up immediately.  You can even enable scrolling so you see not just your header, but you see how your sidebar looks when it gets pushed to the bottom of the mobile theme.

I lived on this site while I was fixing the mobile responsiveness for my own site.  Had it open in a separate window and jumped back and forth from my WordPress page to Screenfly enough to tire out a frog on Starbucks.

There it is folks.  My favorite bloggy websites.  Here’s the truth.  I’m on wordmark.it all.the.time.  All the time, because heck, there’s no way I can remember what fonts I have nor what they look like, and I’m always looking to display something, like the pinnable graphic for a blog post, or a school project, or a free printable.  The others are great handy tools to have in your back pocket too, but they each have their own specific uses – a certain time and a certain place.  I hope you get to use, and love, them all!