Typography

Typography is a suite of stacks designed to give you maximum control over website's text. The stack suite includes individual stacks for headers, text, buttons, code, font importing, and a core. The core is used for setting up global commands to help avoid redundant/repetitive coding saving time and creating consistency. The core's controls include global font sizes, responsive font sizes, colors, link styling, html wrapping, and more. Some global controls can also be overridden later inside of the text & header stacks.

Stacks Image 905

Beautifully

Crafted

AND

slow

coded

2

~Perfection~

- CUSTOM FONTS -

Import as many or as few fonts as you like. The font importing stack lets you choose from importing custom font files (like Font Squirrel) or the very popular Google Web Font library. The stack guides you as to what code to copy from Google's website to help make things as simple as possible. Alternatively, add your custom font files to your resource folder and follow the stack's instructions for adding custom fonts in.

- TEXT CONTROLS -

Text controls give you lots of useful styling features including the ability to have your text automatically forced into columns, ability to force the first letter as a Drop Cap (common feature in newspaper article, magazines and books), fluid sized text (adjust in size according to screen size), letter spacing, text shadows, letter stretching, html wraps and more. Code controls let you display code like a pro with automatic code coloring, indenting, highlighting and more.

Header controls allow for many of these same effects in addition to marquee typing, text rotating, skewing and more. Headers also come packed with 3 cool themes that give unique styling options: themes currently include Neon, Emboss & Overlap.

This is an example of justified text that is forced into 2 columns, though you can choose up to 12. In addition, you can change the gap between the columns including the rule (divider bar) size and color (setting it to a width of zero will hide it all together). The height of the columns will automatically adjust depending on how much text you type in making it a great tool for displaying text similar to text found in Newspaper articles, magazines, and books. Drop cap is also used here, which allows for it’s own custom fonts to help the letter accent away from the normal fonts being used.

Button controls give you tons of styling options to help you build your own custom buttons with control over both hover (when the mouse goes over the button) and active (when the mouse clicks on the button) effects. You have control over all basic colors, font awesome icons, opacity, text shadows, box shadows, rotations, transitions speeds, and more. Alternatively you can choose from our built-in button themes including Squishy, Ribbon, Glass & Alerts.