Style Settings


Edit Mode

  • Edit Label: (input) You can enter a label to make this stack easier to identify in edit mode. The label can be anything that you like and is not added to the font code on your page.
    • Default: My Type Style
  • Edit Preview: (button) You should only turn off this setting to briefly preview your font in edit mode and ensure that it is loading correctly. Leaving this setting enabled can cause page jumps. This is expected behavior in stacks - do not report this as a bug.
    • Default: [false]

Font Styles - Structure

  • Structure: (button-4) Enable structural styles
    • Default: [false, false, false, false]

  • Line Height: (slider) The line height of the text
    • Enable: When Structure is set to true
    • Default: 1.6em
    • Min Value: -2em
    • Max Value: 3em
  • Letter Spacing: (slider) Fine tune the spacing between letters.
    • Enable: When Structure is set to true
    • Default: 0em
    • Min Value: -1em
    • Max Value: 2em
  • Word Spacing: (slider) Fine tune the spacing between words
    • Enable: When Structure is set to true
    • Default: 0em
    • Min Value: -1em
    • Max Value: 2em
  • Break Spacing: (slider) The Space between text separated by a line break
    • Enable: When Structure is set to true
    • Default: 0em
    • Min Value: -1em
    • Max Value: 2em
  • Indent: (slider) The indentation on the text
    • Enable: When Structure is set to true
    • Default: 0em
    • Min Value: -1em
    • Max Value: 2em
  • Margin Align: (slider) The ability to adjust the left/right margins of the typeface so that it visually lines up with other content better.
    • Enable: When Structure is set to true
    • Default: 0em
    • Min Value: -1em
    • Max Value: 1em

  • Size Units: (select) The units of measurement for the font size
    • Enable: When Structure is set to true
    • Default: rem
    • Possible Values:
      • px: Font size specified in pixels
      • rem: Font size specified in rem’s
      • em: Font size specified in em’s
      • %: Font size specified as a percentage of the root font size.
  • Font Size: (number-4) Responsive breakpoint controlled font sizing
    • Enable: When Structure is set to true
    • Default: [0.9, 1, 1, 1]
    • Min Value: 0
    • Max Value: 100

  • Medium: (slider) The medium breakpoint
    • Enable: When Structure is set to true
    • Default: 414px
    • Min Value: 400px
    • Max Value: 1500px
  • Large: (slider) The large breakpoint
    • Enable: When Structure is set to true
    • Default: 768px
    • Min Value: 400px
    • Max Value: 1500px
  • X-Large: (slider) The x-large breakpoint
    • Enable: When Structure is set to true
    • Default: 1000px
    • Min Value: 400px
    • Max Value: 1500px

  • Text Align: (select) The text alignment
    • Enable: When Structure is set to true
    • Default: Default
    • Possible Values:
      • Default
      • Left
      • Center
      • Right
      • Justify
  • Tablet+ Align: (select) The text alignment on tablet and above
    • Enable: When Structure is set to true
    • Default: Default
    • Possible Values:
      • Default
      • Left
      • Center
      • Right
      • Justify
  • White Space: (select) The white-space property is used to describe how whitespace inside the element is handled.
    • Enable: When Structure is set to true
    • Default: Normal
    • Possible Values:
      • Normal
      • No Wrap
  • Text Overflow: (select) The text-overflow CSS property determines how overflowed content that is not displayed is signaled to users. It can be clipped or display an ellipsis
    • Enable: When White Space is set to nowrap
    • Default: Ellipsis (post)
    • Possible Values:
      • Clip
      • Ellipsis (post)
      • Ellipsis (pre)
  • Word Wrap: (select) The word-wrap property is used to specify whether or not the browser may break lines within words in order to prevent overflow when an otherwise unbreakable string is too long to fit in its containing box.
    • Enable: When Structure is set to true
    • Default: Normal
    • Possible Values:
      • Normal
      • Break Word
  • Word Break: (select) The word-break CSS property is used to specify whether to break lines within words.
    • Enable: When Structure is set to true
    • Default: Normal
    • Possible Values:
      • Normal
      • Break
  • Hyphens: (select) The hyphens property controls hyphenation of text
    • Enable: When Structure is set to true
    • Default: None
    • Possible Values:
      • None
      • Manual: Words are only broken at line breaks where there are characters inside the word that suggest line break opportunities.
      • Auto: Words can be broken at appropriate hyphenation points either as determined by hyphenation characters inside the word or as determined automatically by a language-appropriate hyphenation resource
  • Transform: (select) How to capitalize an element’s text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized.
    • Enable: When Structure is set to true
    • Default: None
    • Possible Values:
      • None
      • Capitalize
      • Uppercase
      • Lowercase
  • Decoration: (select) Add text decoration to the style
    • Enable: When Structure is set to true
    • Default: None
    • Possible Values:
      • None
      • Underline
      • Overline
      • Strike Through
      • Underline & Overline
      • Underline, Overline & Strike Through
  • Decoration Style: (select) The style of the text decoration
    • Enable: When Structure is set to true
    • Default: Solid
    • Possible Values:
      • Solid
      • Double
      • Dotted
      • Dashed
      • Wavy

  • Bullet List: (select) The bullet style for unordered lists
    • Enable: When Structure is set to true
    • Default: Disc
    • Possible Values:
      • Disc
      • Circle
      • Square
  • Ordered List: (select) The style for ordered lists
    • Enable: When Structure is set to true
    • Default: Numbers
    • Possible Values:
      • Numbers
      • Numbers w/ leading zero
      • Lower Roman
      • Upper Roman
      • Lower Alpha
      • Upper Alpha

Font Styles - Visual

  • Optional: (button-4) Enable more optional styles
    • Default: [false, false, false, false]

  • Horizontal: (slider) The horizontal offset for the shadow
    • Enable: When Optional is set to true
    • Default: 0em
    • Min Value: -1em
    • Max Value: 1em
  • Vertical: (slider) The vertical offset for the shadow
    • Enable: When Optional is set to true
    • Default: 0em
    • Min Value: -1em
    • Max Value: 1em
  • Blur: (slider) The blur for the shadow
    • Enable: When Optional is set to true
    • Default: 0em
    • Min Value: 0em
    • Max Value: 1em
  • Shadow Color: (color) The color of the shadow
    • Enable: When Optional is set to true
    • Allows Opacity: true

  • Stroke Color: (color) The color of the stroke
    • Enable: When Optional is set to true
    • Allows Opacity: true

  • Color: (color) The color of the type
    • Enable: When Optional is set to true
    • Allows Opacity: true
  • Decoration: (color) The color of the text decoration if applied to the text
    • Enable: When Optional is set to true
    • Allows Opacity: true

  • Opacity: (slider) The opacity of the paragraph and plain text. This setting is useful when using an image background. A slight reduction in opacity can reduce the apparent glare of your text and make it easier to read
    • Enable: When Optional is set to true
    • Default: 1
    • Min Value: 0
    • Max Value: 1

Apply Font Styles To:

  • Apply To: (button-4) Apply to page elements or a custom Font Style
    • Default: [false, false, false, false]

  • Selectors: (input) Advanced: Enter a list of css selectors, separated by commas. Each selector should be preceded by a dot. Your Entry here should form a valid CSS multiple element selector statement.
    • Enable: When Apply To is set to true
    • Default:

  • Custom Class: (input) You can enter a unique class name which will recieve this font definition. This can be used anywhere in your page to apply this font defiintion with the appopriate CSS
    • Enable: When Apply To is set to true
    • Default:

  • Add to Font Style: (select) Add this font to a Font Style for easy access in other stacks that support Font Styles
    • Enable: When Apply To is set to true
    • Default: Style 1
    • Possible Values:
      • Style 1
      • Style 2
      • Style 3
      • Style 4
      • Style 5
      • Style 6
      • Style 7
      • Style 8
  • Apply to Children?: (checkbox) Also apply the styles to the direct children of the Font Style container.
    • Enable: When Apply To is set to true
    • Default: true

  • Page Wide Default?: (checkbox) Set the font as a default style for all fonts on the page. Font will be applied to html and body elements
    • Enable: When Apply To is set to true
    • Default: false
  • Page Elements: (button-4) Select items that will use this web font
    • Enable: When Apply To is set to true
    • Default: [true, false, false, false]
  • ****: (button-4) Select items that will use this web font
    • Enable: When Apply To is set to true
    • Default: [false, false, false, false]
  • ****: (button-4) Select items that will use this web font
    • Enable: When Apply To is set to true
    • Default: [false, false, false, false]

Advanced

  • Force: (button) NOTE: Only use this setting in exteme cases! Force this font to display with a !important. Remember adding this will override any further fonts below that you may define on elements that also posses the class types that this font is applied to.
    • Default: [false]