Text Styles
Text is styled using Text Styles. Most Templates come with four predefined styles: Bodycopy, Heading 1, Heading 2, and Caption, but there is no limit to how many text styles can be added.
By default, text on a page is styled according to the Bodycopy text style. To use a different style, select the text and click on the Text Style name in the top menu bar. To edit or add Text Styles, open the Text Style menu (the “Aa” icon in the right menu bar): here you can change font properties as well as edit, duplicate, and delete styles. To add or edit properties that are not part of the interface, click on the "</>" icon at the bottom.
Text Options
It’s possible to change certain text properties locally without making changes to the Text Style itself: select some text and open the Text Options menu (the “Tt” icon in the top menu bar). Here you can specify basic formatting: Bold, Italic, Small Caps, Superscript, Subscript, Underline, Strikethrough, and No Wrap, as well as color, font scale, and line height.
The “Scale to fit width” option scales the size of selected text to fit the available width of its container (the page or the column where the text is located).
Tip: to exit a style, press return twice quickly. To add multiple line breaks within a Text Style, press return more slowly.
Lists
To format text as a Bulleted List, a Numbered List, or Lineated, select the text and open the Lists menu (the bulleted list icon in the top menu bar). The Lineated option indents a line of text when it soft-breaks, as is often seen in poetry. To change the properties of these list options, open the CSS menu (under Site Settings) and search for ol, ul, or ul.lineated.
Effects
The Text Styles menu also offers a number of “Effects” that can be applied, like Border and Drop Shadow. Find these in the More Options menu when editing a text style (it is not possible to apply these to Bodycopy). Additional Effects can be applied locally: select some text and open the Effects menu (in the top menu bar) — Rotation, Border, Drop Shadow, Blink, Eyeroll, Draggable. Learn about these Effects here.
Buttons
Cargo comes with a variety of pre-made button styles: open the “Add...” menu, go to More..., and choose Button... These Button styles function as a kind of shortcut for what can be done manually as well, by adding Borders, Background, Color, etc. to text. When making a button with text already selected, the button style will copy the Text Style that the selected text is part of. If a button is added without text selected, the Bodycopy Text Style is copied for the new button style.
Adding fonts
To learn how to add new fonts to Cargo, see this page.
Mobile Settings
It’s possible to change the font size and color of the different Text Styles on mobile: go into Mobile Preview (the phone icon in the top menu bar) and choose the Text Style you want to change (the keyboard shortcut for toggling Mobile Preview is ⇧⌘X).
Type Settings & Glyphs
This provides access to “contextual alternates” (a feature that, if available in the selected font, automatically swaps letters for a different version), “font feature settings,” and contains a glyph palette with every character that the selected font contains (click a glyph to copy it to the clipboard). The font feature settings include: Access All Alternates, Contextual Alternates, Case-Sensitive Forms, Denominators, Fractions, Standard Ligatures, Localized Forms, Numerators, Ordinals, Proportional Figures, Required Ligatures, Stylistic Alternates, Scientific Inferiors, Subscript, Superscript, Tabular Figures, Slashed Zero.
The Type Settings & Glyphs menu is located in the “More Options” menu at the bottom of the Text Styles window.
Link Color
Controls the color of Linked text within the Text Style. If left untouched, the link color will match the text color. To reset a previously modified link color to its default, open the color picker and click the square with the red diagonal line. This setting is located in the “More Options” menu at the bottom of the Text Styles window.
Underline Links
Enable this option to underline links within this text style. When enabled, the color of the underline can be controlled as well. This setting is located in the “More Options” menu at the bottom of the Text Styles window.