--- title: "Font sizing and alignment properties" date: "2017-11-10T16:39:51+00:00" summary: "Customize text appearance with font sizing and alignment properties. Control font size, line height, text alignment, letter spacing, word spacing, and text indent for enhanced readability and visual appeal in your web designs." image: type: "page" url: "/drupal-starter-kits/add-ons/site-studio/font-sizing-and-alignment-properties" id: "a31519a3-8eeb-4aa2-83e0-9d7825272464" --- Table of contents will be added Set the Font size, Line height, Text alignment, Letter spacing, Word spacing and Text indent of text and elements that can use these properties. Font size --------- Set the size of the font.  ### Expected value: * Number * Keyword - Set the font size using a keyword: xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger ### Accepted units: You can leave blank (Recommended) or specify a unit to be used. * **blank** - Just add a number and the value will be interpreted as pixels and be converted to rem's automatically if this behaviour is set within [Base unit settings](/drupal-starter-kits/add-ons/site-studio/configuring-your-base-unit-settings "Configuring your base unit settings") * **px** - The value will be applied in pixels. **Warning:** Setting the font size in pixels is not accessible because the user cannot change the font size from the browser. * **%** - The value will be applied as a percentage of the parent elements font size Additional units are accepted. For more information see [https://developer.mozilla.org/en-US/docs/Web/CSS/font-size](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) Find more information about font-size at [https://developer.mozilla.org/en-US/docs/Web/CSS/font-size](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) Line height ----------- Set the distance between the lines of text. ### Expected value: * Decimal number * Number ### Accepted units: You can leave blank (Recommended) or specify a unit to be used. * **unitless decimal number** - Set line height as a decimal number E.g. 1.2 and it will always be proportional to the font size * **unitless whole number** - Add a whole number and the value will be interpreted as pixels and be converted to rem's automatically if this behaviour is set within [Base unit settings](/drupal-starter-kits/add-ons/site-studio/configuring-your-base-unit-settings "Configuring your base unit settings") * **px** - The value will be applied in pixels. **Warning:** Setting the line height in pixels is not recommended as it will not scale proportionally with the text if the text size is increased * **%** - The value will be applied as a percentage of the font size Find more information at [https://developer.mozilla.org/en-US/docs/Web/CSS/line-height](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height) Text align ---------- Set how text is aligned within its parent element. ### Options and behavior: * **Left** \- Align the text to the left * **Right** \- Align the text to the right * **Centre** - Align the text to the centre Find more information at [https://developer.mozilla.org/en-US/docs/Web/CSS/text-align](https://developer.mozilla.org/en-US/docs/Web/CSS/word-break) Letter spacing -------------- Set the spacing between text characters. ### Expected value: * Number ### Accepted units: You can leave blank (Recommended) or specify a unit to be used. * **blank** - Add a whole number and the value will be interpreted as pixels and be converted to rem's automatically if this behaviour is set within [Base unit settings](/drupal-starter-kits/add-ons/site-studio/configuring-your-base-unit-settings "Configuring your base unit settings") * **px** - The value will be applied in pixels. **Warning:** Setting the line height in pixels is not recommended as it will not scale proportionally with the text if the text size is increased Find more information at [https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing](https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing) Word spacing ------------ Set the spacing between words. ### Expected value: * Number ### Accepted units: You can leave blank (Recommended) or specify a unit to be used. * **blank** - Add a whole number and the value will be interpreted as pixels and be converted to rem's automatically if this behaviour is set within [Base unit settings](/drupal-starter-kits/add-ons/site-studio/configuring-your-base-unit-settings "Configuring your base unit settings") * **px** - The value will be applied in pixels. **Warning:** Setting the value in pixels is not recommended as it will not scale proportionally if the text size is increased * **%** - The value will be applied as a percentage of the affected character's advance width Find more information at [https://developer.mozilla.org/en-US/docs/Web/CSS/word-spacing](https://developer.mozilla.org/en-US/docs/Web/CSS/word-spacing) Text indent ----------- Set indent applied to the first line of text in a block. ### Expected value: * Number ### Accepted units: You can leave blank (Recommended) or specify a unit to be used. * **blank** - Add a whole number and the value will be interpreted as pixels and be converted to rem's automatically if this behaviour is set within [Base unit settings](/drupal-starter-kits/add-ons/site-studio/configuring-your-base-unit-settings "Configuring your base unit settings") * **px** - The value will be applied in pixels. **Warning:** Setting the value in pixels is not recommended as it will not scale proportionally if the text size is increased * **%** - The value will be applied as a percentage of the containing block's width Find more information at [https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent](https://developer.mozilla.org/en-US/docs/Web/CSS/word-spacing)