a blog on prototyping by pidoco°

If font style matters for your prototype, we have some great news. Pidoco’s custom stencils are a great way to create unique templates that you can reuse throughout a project. Combined with the rich text stencil you can easily create your custom font templates, for example to style headlines, subheadings, paragraphs or navigation – a unique font template library. This may not only help you save a lot of time but also ensure a consistent design language throughout your project. And here is how it goes …

1. Create your custom stencil

First, you will need to define your custom font styles. To do so, you can create several custom stencils – one for each font style. The custom stencils will be added to your stencil palette and instead of the standard text stencil, you can use them to create text elements with the desired style. In one of our previous posts, we explained how to create a custom stencil. In brief: the easiest way to start building your custom stencil is a click on the “CREATE STENCIL” button in the stencil palette. This will open a new canvas where you can design your stencil.

Creating a new custom stencil in Pidoco

2. Add a text element

Depending on the type of content you want to style, drag the corresponding text element into your custom stencil, e.g. HEADLINE 1 to define a title, HEADLINE 2 for a subheading, TEXT BLOCK for a paragraph or even a LIST stencil. It is worthwhile changing the content to something that will immediately tell you what type of content is represented by a certain style. For instance, you might call a title something like “This Is A Title”.

Adding a text element to the custom stencil by dragging and dropping it to your canvas.

3. Style your text

Once you have added the right text element to your custom stencil, start styling it. You can do this by double clicking the text element and adjusting the font size, font weight or alignment. Pidoco even offers a number of font and highlight colors.

In this example I created a headline and used bold and capital letters, a font size of 42px and grey text.

Editing a text element using the inline editing function.

Once you are done styling your font template, just click outside the text.

4. Use and reuse your custom styled fonts

When you are finished editing your custom stencil, click on “Done”. Of course you can create multiple custom stencils if you have several font styles you need for your prototype. All your custom stencils will be added to the end of the stencil palette. (Hint: Make sure to give each custom stencil a unique name for easy recognition!)

Using custom stencils to work with pre-defined font styles

Instead of using the standard text stencil, you can add your font templates. Once added to the canvas, you should break the link of that instance to the template using the context menu and clicking on “Detach from custom stencil”. Now you can edit the content of the custom stencil.

Detach the custom stencil to start adding your individual content

5. Examples

Styling your text within a custom stencil always works the same. So just give your creativity free rein! To get some inspiration, here is a small gallery with a few examples.

That’s it! You have successfully created your very own custom font styles!

Do you need help working with custom stencils? Then do not hesitate and drop us a line via support@pidoco.com or Facebook and Twitter.

Happy Prototyping!