The Typography section offers a wide variety of styling and layout options for text-based components (“Text”, “Text Input”).

Font Family

You can choose from variations on a typeface design by selecting a Font Family.

When you start a new Project, the only font available is “System,” which indicates that the device rendering the screen will use its own default font to render text. Different platforms and operating systems each have their own set of pre-installed fonts, so Shipcode is unable to assume that a specific font is available for end users.

In order to fully customize your text, Shipcode gives you the ability to upload your own fonts. To add a new font, click on the Font Family dropdown and then click “Add New”.

Next, click the Choose Files button, select your font file, and click “Open”. The font will be uploaded to Shipcode and will be available in the Font Family dropdown for any text element in your project.

Shipcode supports TrueType (.ttf) and OpenType (.otf) font formats. It is your responsibility to ensure that you have the appropriate licenses for utilizing the fonts in your web and/or native apps. Shipcode serves the custom font files to the end users’ devices, guaranteeing that text will display as you intended.

Font Weight

You can specify the overall thickness of a font using Font Weight. This option controls the numerical weight of the font — where 100 is the lightest and 900 is the boldest. The list also contains a Bold option, which corresponds to the 700 weight, and a Regular option, which corresponds to 400.When using custom fonts, the rendering engine will display the “closest” available font weight in the event that you have not uploaded a font that exactly matches the specified weight.

Font Size, Line Height, and Letter Spacing

These options control the size of the text, the vertical spacing between lines of text, and the horizontal spacing between individual characters of text.

Color and Opacity

These options give you the ability to customize the color of text as well as its opacity.

Text Align

The text align option controls how the text is aligned within the Text component. By default, the text will be left-aligned; you may also select center or right-aligned.

Text Transform

This option provides options for customizing the capitalization of the selected text.

• The “Uppercase” option displays text in uppercase (THIS IS A SAMPLE)
• The “Capitalize” option capitalizes the first letter of every word (This Is A Sample)
• The “Lowercase” option removes all capitalization (this is a sample)

Note that additional text customization options, such as sentence case, are available using FQL Pipes

Text Decoration, Text Decoration Style, and Text Decoration Color

The “Text Decoration” option gives you the ability to italicize text as well as add an underline and/or strikethrough line. You may further customize the underline or strikethrough line with the “Style” and “Color” options; the style option allows you to use a dashed, dotted, double, or solid line, while the color option sets the color of the underline/strikethrough line.

Include Font Padding (Android only)

This is an Android-only option that can be toggled to enable or disable padding that’s added to make room for accents above and below text. This option is enabled by default, which is the appropriate behavior for most circumstances. However, on rare occasions, certain custom fonts may appear to be aligned incorrectly when accents are used; in this case, toggling this setting off may alleviate the issue.

Writing Direction

This option determines whether text will be rendered left-to-right or right-to-left, the latter of which should be the case for languages such as Arabic and Hebrew. The default option, Auto, relies on the user’s device to determine the appropriate text direction, which should be appropriate for most use cases.