Tabs deep dive: font styles

•

Summary•3 min read

Docusign offers you the option to customize the appearance of your tabs’ font, font size, and color. See how to control these properties in your API calls.

Additional resources

Additional resources

Welcome back to the Tabs deep dive series. In previous posts I’ve discussed the many different types of tabs and some of the properties of those tabs. In this post I’m going to focus on the properties that enable you to customize the font of your text tabs and the appearance of your checkboxes.

Before I get into how to set tab styles on an individual tab basis, I want to note that you can also set a default font for your text tabs through your eSignature settings. A previous post in this series, Tabs deep dive: eSignature settings, goes into more detail on how to do this.

But let’s say you want to change the appearance of the text in a single text tab. You can use the font, fontColor, and fontSize properties to alter the font of the tab’s text. Setting these properties will override any default settings that you have for text appearance. This JSON snippet demonstrates how to set these properties on a text tab.

"textTabs": [
{
      	"xPosition": "400",
            "yPosition": "100",
            "documentId": "1",
            "pageNumber": "1",
            "font": "Arial",
            "fontColor": "BrightBlue",
            "fontSize": "Size16",
            "required": "false"
       }
]

Here’s what the text entered into this text tab will look like.

The properties that affect the font can’t be set to just any value. The font property accepts the following values:

Default
Arial
ArialNarrow
Calibri
CourierNew
Garamond
Georgia
Helvetica
LucidaConsole
MSGothic
MSMincho
OCR-A
Tahoma
TimesNewRoman
Trebuchet
Verdana

The fontColor property has the following possible values:

Black
BrightBlue
BrightRed
DarkGreen
DarkRed
Gold
Green
NavyBlue
Purple
White

Finally, the fontSize property can be set to the following values:

Size7
Size8
Size9
Size10
Size11
Size12
Size14
Size16
Size18
Size20
Size22
Size24
Size26
Size28
Size36
Size48
Size72

These properties are not only available for Text tabs. You can set them on other tab types to control the appearance of text in the document, even if that text is not being entered by the recipient. Full Name tabs, Date Signed tabs, Email Address tabs, and more can all display text with customized fonts, colors, and sizes.

You can also use the fontSize and fontColor properties to determine the appearance of radio buttons and checkboxes in your documents. This JSON snippet shows what this looks like for a Checkbox tab.

"checkboxTabs": [
{
      	"xPosition": "400",
            "yPosition": "100",
            "documentId": "1",
            "pageNumber": "1",
            "fontColor": "DarkRed",
            "fontSize": "Size12",
            "required": "false"
      }
]

It won’t be immediately obvious to your recipients that the checkbox has any custom font color or size, and while the recipient is completing the document, the checkbox will look like the checkbox in this screenshot:

After the document has been completed, the checkbox styles will be reflected in the final document:

When adding tabs to your documents through the eSignature REST API, you don’t have to be married to your default settings for fonts. You can use the font, fontColor, and fontSize properties to customize the appearance of the text in each one of your tabs. Check out the API reference to learn more about all of the properties you can use to customize your tabs.

Additional resources

Paige RossiSr. Programmer Writer

Paige has been working for Docusign since 2020. As a Sr. Programmer Writer on the Developer Content team, she writes content and code to help developers learn how to use Docusign APIs.