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 am an amateur calligrapher. I love destressing at night with some tunes on Pandora, a glass of wine, my dip pen and ink, and writing a gazillion practice sheets. I’ve wanted to start getting more involved with my calligraphy and finding practical ways to use it daily. So that’s why I’ve created this awesome set of 30 free calligraphy elements for your website. All useful blog-related words are written in a fancy handwritten script and then turned into images for you to use however you’d like. These images could be used for titles in your sidebar, 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 also 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 above. If you have Photoshop, you can change the color of the images or integrate them into your media piece.
Go ahead and 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? One way to use them is as title headings on your site. For example, you could use the “About Me” calligraphy script instead 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 use an image instead of a font file? Sometimes, you only want to use a few words in a fancy script throughout your site. You can 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, 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 hobbyist, these words are a great addition to your arsenal. You could use them in mashups, mockups, collages, wallpapers, prints, the list goes on.
How to Use Images instead of Titles in Your Sidebar
If you’d like to insert 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 follow 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 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 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 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, the image should be displayed at 30% of its original size for this one. 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 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 sidebar!
Digging into the code
Adding a Link to the Image
Adding some more code can achieve several additional functions with this image heading. 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 to look 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 as the title heading for my widget area. I’ve also uploaded a profile pic (resized 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?!
Wrapping Up
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 release different packages of elements in various script and calligraphy styles that are free for you to use.
If you have any questions or suggestions about how to use the images, 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!