As a graphic designer, I’m completely in love with all those lovely handwritten scripts and calligraphy fonts you see all over the Internet these days. Chalk art, flourishes, modern scripts – the trend is fierce, and I’m diggin’ it!
I myself am an amateur calligrapher–I love destressing at night with some tunes on Pandora, a glass of wine, my dip pen and ink, writing out a gagillion practice sheets. I’ve wanted to start getting more involved with my calligraphy and finding practical ways to use it in my daily life. So that’s why I’ve created this awesome set of 30 free calligraphy elements for your website – all sorts of useful blog-related words written out in a fancy handwritten script, and then turned into images for you to use however you’d like. These images could be possibly used for titles in your sidebar, on featured images or Pinterest posts… the options are endless.
Of course, this free set can be used however you see fit – not only on your website, but in other applications like print media or JPG images. They are geared toward bloggers, so I’ve included words like “Connect,” “About Me,” all your social media outlets and the like. Here’s a sneak preview of what you’ll get!
WHAT YOU GET: In the download, you will get a folder that contains one set of high-resolution (print-friendly) transparent PNG images – each word is a file and is on a transparent background. You also get a folder of web-resolution images, which you can use on your websites. I’ve also included a Photoshop document that looks like the image you see above. If you have Photoshop, you can change the color of the images or integrate them into your own media piece.
Go ahead, download the images by clicking the download button below!
This work is licensed under a Creative Commons Attribution 4.0 International License.
How to Use Calligraphy Elements on Your Website
So, you ask, what can I do with these images? Well, one way to use them would be as title headings on your site. For example, you could use the “About Me” calligraphy script in place of a title in your sidebar. You could upload these to the media library and then insert the image in a text widget, or if you are more technically-inclined, you can access your theme files and replace section headings throughout your theme files with the image files instead.
Why would I want to use an image instead of an actual font file? Sometimes, you only want to use a few words in a fancy script throughout your site. You can certainly install a whole font, but this drags down your website because web fonts are big and bulky, and your SEO is impacted by page load speed. So instead, maybe try inserting a couple of these beauties. Worth a shot, right?
Other Ways to Use the Images
If you’re a professional graphic designer or just a hobbyist, these words are a great addition to your arsenal. You could use them in mashups, mockups, collages, wallpapers, print things, the list goes on…..
How to Use Images instead of Titles in Your Sidebar
If you’d like to try inserting an image as a heading in your sidebar, let me walk you through the steps you’d want to take. I’m using WordPress as my CMS, so these instructions will be for how to insert images as sidebar titles using WordPress.
- Download the script images by clicking the button above.
- Unzip the folder.
- Find the For Web folder and locate the image(s) you want to upload. I’m using the “About Me” image if you’re following along.
- In WordPress, open your Media Library and upload the images. Click Edit on the first image you’d like to work with so that you can copy the image URL when the time comes.
- In a new tab, go to Appearance > Widgets in your WordPress Dashboard and find the sidebar or widget area you’d like to insert the image in.
- Click and drag a Text Widget over from the left into that widget area. Click the arrow down to expand it.
- Paste the following code into the text widget:
<img src="http://yourdomain.com/calligraphy-image.png" style="width:30%; height:auto; display:block; margin:0px auto;">
- Now, from the image details tab that you also have open, find the image URL in the top right of the page (the blue highlighted field) and copy it, then paste it into the image placeholder URL in the text widget.
- You will notice there is some additional styling in the code. It should always stay there, and you won’t have to touch any of it except for the width – that one you will probably end up styling a bit. The extra code bits accomplish the following:
- Width: This allows you to condense the image if it appears a bit too large for your widget area. So, for this one, I’m saying that the image should be displayed at 30% of its original size. This width will vary between words, since some are longer than others so you will want to play around with the number to get a size you like.
- Height: This should always remain set to auto, it lets the width attribute determine the size instead.
- Display: This tells the image to display as a block element so that it can center within the widget area.
- Margin: This is related to the “display:block;” and helps position the image in the center.
- Click Save on your text widget after you’re finished entering any other text you want displayed.
Keep reading to see how I styled my “About Me” widget – I’ve included the code so you can just copy/paste and use it for your own sidebar!
Digging into the code
Adding a Link to the Image
You can achieve several different additional functions with this image heading by adding some more code. For example, if you’d like to turn the image into a link that would go to your “About Me” page, you can wrap the image tag with an <a> tag, so the code would look something like this:
<a href="http://yourdomain.com/your-blog-url/"><img src="http://yourdomain.com/calligraphy-image.png" style="width:30%; height:auto; display:block; margin:0px auto;"></a>
Adding Opacity (Making the Image Gray instead of Black)
You could also change the opacity of the calligraphy script image so that it looks gray instead of black (you could change it to any color using a color overlay in Photoshop too, if you want to get real fancy). To do so, you’d add an opacity attribute to the style tag, so the code would read like this:
<img src="http://yourdomain.com/calligraphy-image.png" style="width:40%; height:auto; display:block; margin:0px auto; opacity:0.5;">
Styling your “About Me” Widget Area
As you can see, I’ve used the “About Me” calligraphy image to be the title heading for my widget area. I’ve also uploaded a profile pic (presized to be small enough) and created some content for the area. I’m using our Ember theme to walk through this tutorial, but the image class presented below is not specific to this particular theme – it’s a Bootstrap class, so if your theme supports Bootstrap you can use this class as well to make your image look like it’s cut out in the shape of a circle. If not, try doing this in Photoshop to achieve the same effect.
So, here’s the complete code you can paste into your text widget to get the look of an “About Me” widget:
<img src="http://yourdomain.com/calligraphy-image.png" style="width:60%; height:auto; display:block; margin:0px auto;"> <img src="http://yourdomain.com/your-profile-image.jpg" class="img-circle" style="float:left; margin:20px; width:50%; height:auto;"> <p style="margin-top:20px;">Hi! This is your About Me description area.</p>
That’s all there is to it! Pretty cool, huh?!
This is just one way to use these awesome calligraphy web elements – and this is just the first of the series. I love writing calligraphy, so I will be releasing different packages of elements, in various script and calligraphy styles, free for you to use.
If you have any questions on how to use the images, or suggestions, please let me know in the comments below. AND, post a link to your site if you’re using them – I’d love to see the elements in action!