Developing custom Character styles gives each project its own direction and flair. The builder offers a variety of styling options that can be saved and automated for ease of use.
By Navigating to the sidebar on the left, and clicking on the Character Styles Icon you’ll see two sub-headers: Project Styles and Base Styles.
Creating a Custom Project Style
Use This style Across Projects
is asking if you want this new style you are creating to be accessible only to this project or if other projects would also be able to access it. This may be useful if you are working on multiple projects and what the style to remain consistent.
Name
allows you to assign a unique name to your Character Style, make sure that it is descriptive and that the name informs how it is used.
Apply Inline
allows you to decide the hierarchy in which this style will be applied. Specifically this decides whether a <span> element will be added into your HTML which will contain the styling of your custom text, or if this style will be applied directly to the <p> elements of your text. If you do not plan on doing anything elaborate with HTML, you can leave this toggle unchecked.
While the in-line toggle might not be immediately noticeable when changed, the other aspects of your styling will be, and can be previewed below in the ‘preview box.’ Here you’ll be able to finesse your font by changing it’s:
Font family
is the base font-family you are working with.
Background Color
is the background color of your text, if this is different than the background color of your text box it will appear as if your text is being highlighted in this color.
Text Color
is the color of your text.
Line height
refers to the spacing between each line. For readability something like 1.4 is Optimal, for headers 1.2 might fit better. Do your own research and see what spacing options appeal to you.
Margins
are the spacing between one text box and another, for instance if I wanted to ensure that my text boxes are consistently spaced, I would want to change these values to reflect that spacing. You’ll notice that there is space for 4 sequential values, these correspond to the Margin for the Top, Right, Bottom and Left in that Order. Make sure to enter these values in with the suffix of ‘px’.
Padding
is the spacing between the text and the border of your text box, and follows the same convention for spacing as Margins.
Text alignment
refers to the way in which the text is aligned in your box.
Base Styles
are generic styling options that are used across multiple books, this tab should be left untouched as changing something here could retroactively change styling across other projects. These styles are used Globally.
Project Styles
are Locally used styles that are created specifically for your project. In a new project this sub-panel should be empty; so let’s go ahead and add a new style to our book. Clicking the ‘+’ Button on the bottom left of this panel brings up the styling Options.
Once you are satisfied with your metadata, click the check mark to save your changes. Then, using the search bar, search the name you assigned you media, select it, hit the check in the bottom, and place your media on the screen.
If your media object has title/caption you want to show or hide, go to the object menu, select info toggles, and set which information you want to show and hide. The object menu also allows you to change the layout and crop of your content. A more in depth look at this toolbar can be found here.
Once you’ve created your custom Character Style, you can save it. You’ll see my new text is now available for selection in the Project Styles Sub Section. I can now highlight text in my builder, and select my custom character style to use in the text.