---
title: "Font style and wrapping properties"
date: "2017-11-10T16:44:29+00:00"
summary: "Customize text appearance with font style, text transform, decoration, word wrap, and direction options. Learn how to enhance readability and visual appeal for your web content."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/font-style-and-wrapping-properties"
id: "f9a5389e-6d1b-40d1-8ce0-9f160c2d2405"
---

Table of contents will be added

Set the Font style, Text transform, Text decoration, Word wrap and Text direction of text.

Font style
----------

Set the font style to be applied to text.

### Options and behavior:

*   **Normal -** Sets the font to normal
*   **Italic -** Sets the font to italic

Important

If the specified style is not available, both italic and oblique faces are simulated by artificially sloping the font (use font-synthesis to control this behavior).  
  
Find more information at [https://developer.mozilla.org/en-US/docs/Web/CSS/font-style](https://developer.mozilla.org/en-US/docs/Web/CSS/font-style)

Text transform
--------------

Set how text should be capitalized.

### Options and behavior:

*   **None** - Set the text transform to none
*   **Capitalize** \- Set the first letter of each word to a capital letter
*   **Uppercase** - Set all letters to capital letters
*   **Lowercase** - Set all letters to lowercase letters

Find more information at [https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform)

Text decoration
---------------

Set the appearance of decorative lines on text.

### Options and behavior:

*   **None** - Set the text decoration to none
*   **Underline** \- Set an underline on the text
*   **Overline** - Set an overline on the text
*   **Line through** - Set a line through the text

Find more information at [https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration)

Word wrap
---------

Set how words should break onto the next line when there is not enough space on the current line.

### Options and behavior:

*   **Normal** - Set words not to break
*   **Break word** \- Set words to break if they do not fit on the current line

Find more information at [https://developer.mozilla.orUS/docs/Web/CSS/word-break](https://developer.mozilla.org/en-US/docs/Web/CSS/word-break)

Text direction
--------------

Set the direction of the text and other elements.

### Options and behavior:

*   **Left to right (ltr)** - Text and other elements go from left to right
*   **Right to left (rtl)** \- Text and other elements go from right to left

Find more information about text direction at [https://developer.mozilla.org/en-US/docs/Web/CSS/direction](https://developer.mozilla.org/en-US/docs/Web/CSS/direction)