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:
- 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
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.
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
These properties are available in CSS Hero and you can set your custom values too.
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).
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
rgb(0, 0, 0) 1px 1px 4px
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.