Text Properties

This is the first section and here you will find the font/text CSS properties that  have full control of your website typography.

In this screenshot we have an overall look of the Text section.

CSS Hero Supported Text Properties:

  • Color
  • Font Family
  • Font Size
  • Font Style
  • Text Decoration
  • Text Transform
  • Text Indent
  • Font Weight
  • Word Spacing
  • Letter Spacing
  • Line Height
  • Text Align
  • Text Shadow (with the shadow builder)
  • Text Overflow
  • White Space

font-family

The Academic Definition:

The font-family property specifies the font for an element.

To browse the font list just click on the SELECT button. Alternatively, you can type the font name in the text box at the left the Select button. You might have to save and wait the page to reload to view the result if you use a custom Google font that is not listed in the select.

The fonts list in CSS Hero

The fonts list in CSS Hero

font-size

How the CSS font-size Property name speaks… The font-size property sets the size of a font.

Common Font Units are: px, em, rem. CSS Hero supports them all natively, e.g:

12px - 2em - 2rem

Note: You may find&use the correct unit of your theme and respect this to preserve its responsive feature.

After saving a value in a different unit, CSSHero will try to conveniently adjust the slider according to the new unit.

Another Feature in CSS Hero – Auto Range in slider interface.

Cassius is always trying to create a smart range (the min and max values of the slider), reading your last saved input value. So you’ll find a new range whenever you save a new value. Try it!

With CSS Hero you can type in the input area with your keyboard the value. Then press ENTER on your keyword (or TAB) and you will see in live view what happens in Font Size.

Other Text CSS properties

  • font-style
  • text-decoration
  • text-transform
  • text-indent
  • font-weight
  • word-spacing
  • letter-spacing
  • line-height
  • text-align

These properties are available in CSS Hero and you can set your custom values too.

text-shadow

This is one of the powerful features added in CSS Hero for your live editing experience. We remind you that text-shadow property is supported in all major browsers but not in Internet Explorer 9 and earlier versions.

Text Shadow Presets in drop down menu

Out of the box CSS Hero has a number of  text shadow examples, take a glance and see them in action clicking on text shadow drop down menu (how displayed in the snapshot below).

Text-shadow syntax:

h-shadow v-shadow blur color

This property attaches one or more shadows to text. The property is a comma-separated list of shadows, each specified by 2 or 3 length values and an optional color. Omitted lengths are 0.

White and Grey example:

rgb(255, 255, 255) 4px 3px 0px, rgba(0, 0, 0, 0.15) 9px 8px 0px

Milky example:

rgb(0, 0, 0) 1px 1px 4px

text-overflow

The Academic Definition:

The text-overflow property specifies what should happen when text overflows the containing element. So you can choose simply text-overflow:ellipsis or text-overflow:clip with our select menu.


CSS Hero is the definitive plugin to customize your WordPress themes with an easy and intuitive WYSIWYG interface.

Affiliate

Become a CSS Hero affiliate and earn 40% on each sale right now. Spread the CSS Hero word and share the wealth with us!
Start Earning →

Follow the Hero