Posts tagged ‘typography’

CSS Primer for Lightning Developers: Font and Text Properties for Typography

There are a number of properties that you can use to apply styling to the type and appearance of text in your Lightning Components and Applications.

Font properties can be used to define the typeface, boldness, size and other attributes of the text that you display to your users.

Text properties focus on aspects of styling such as text alignment, spacing and color.

Font Properties

The most common font properties include:

  • font-style
  • font-variant
  • font-weight
  • font-size
  • font-family

font-style

For all intents and purposes, the font-style property is primarily used to specify whether or not text should be displayed in italics.

The possible values for the font-style property include:

  • italic – Displays the text in italics
  • oblique – Displays the text in a leaning manner – similar to italic, but not as widely used
  • normal – Displays the text normally
  • inherit – Inherits the font-style value from the parent element

font-variant

Similar to font-style, the font-variant property is narrow in scope and is used to specify whether or not text should be displayed in small-caps.

The possible values for the font-variant property include:

  • small-caps – Converts all lowercase letters to uppercase letters, but in a smaller font size than any letters that were originally capitalized
  • normal – Displays the text normally
  • inherit – Inherits the font-variant value from the parent element

font-weight

Another property with a narrow scope, font-weight is used to specify whether or not text should be displayed using a bold weighting.

Unlike font-style or font-variant, however, font-weight is an interesting property in that its possible values correspond to a scale to which is applied to the text weighting.

The font-weight property is also dependent on the specific typeface used, as some typefaces only support a limited number of values.

The possible values for the font-wight property include:

  • 100, 200, 300, 400, 500, 600, 700, 800, 900 – Numeric font weights for typefaces that support more values than the standard bold or normal
  • bold – Displays the text in a bold font weight – equivalent to the numeric value of 400
  • normal – Displays the text using a normal font weight – equivalent to the numeric value of 400
  • inherit – Inherits the font-weight value from the parent element
  • bolder – Selects the next higher available font-weight value for a typeface than its parent element
  • lighter – Selects the next lower available font-weight value for a typeface than its parent element

font-size

The font-size property is used to manage the size of text, an important aspect of defining the styling of your Lightning Components and Applications.

The font-size property can be defined with values that are expressed as either absolute or relative units of measure. CSS measurement units are covered in another post.

If a font-size is not specified, the default size for text in browsers is 16px, or 1em.

font-family

There are two types of font families that can be used as values for the font-family property: generic font families and specific font family names.

Generic font families include:

  • Serif – fonts that include a small line at the end of a stroke in the letter
  • Sans-Serif – fonts that do not include a serif at the end of strokes
  • Monospace – each letter in the font takes up the same amount of horizontal space
  • Cursive – fonts with connected letters or strokes that sometimes resemble handwriting more than print typography
  • Fantasy – Decorative fonts that typically have a playful element to them

Examples of common specific font family names (grouped by their corresponding generic font family) include:

  • Times New Roman, Georgia, Century, Lucid and Trajan (Serif)
  • Arial, Helvetica, Verdana, Droid Sans and Tahoma (Sans-Serif)
  • Courier, Consolas, Andale Mono, Lucida Console and Monaco (Monospace)
  • Comic Sans MS, Lucida Handwriting and Zapf Chancery (Cursive)
  • Copperplate Gothic Bold, Haettenschweiler and Playbill (Fantasy)

If multiple fonts are specified for the font-family property using a comma-separated list, a browser will read the values from left-to-right and apply the first font that it supports.

Always start with the font you most want to use, and then follow with increasingly generic substitute options to ensure that the browser will be able to find a font that it supports.

If a font name consists of multiple words, such as Times New Roman, you must wrap the font name in quotes.

For example:


p {

    font-family: "Times New Roman", serif;

}

font shorthand

While some of the above properties (font-variant in particular) may seem slightly esoteric, there is method to the madness of including them with other commonly used font properties.

The reason why it’s important to know about these individual font properties is that there is a shorthand property simply called font that enables you to consolidate a number of properties into a single property, and it requires values for all of the properties we just talked about.

The properties that can be set using the font shorthand property, in order and separated by whitespace, include: font-style, font-variant, font-weight, font-size/line-height, and font-family. The font-size and font-family properties are required, all others will simply apply default values if they are not explicitly defined.

An example of using the font shorthand property:


p {

    font: italic bold 12px Helvetica, Tahoma, sans-serif;

}

Text Properties

Common text properties include:

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

text-align

The text-align property can be used to horizontally align text in an element. Possible values include:

  • right – Horizontally align text to the right of a container
  • center – Horizontally center text in a container
  • left – Horizontally align text to the left of a container
  • justify – Stretch text to fill all of the available space in a container so that all lines are of equal width, similar to columns in a newspaper
  • inherit – Inherits the text-align value from the parent element
  • initial – Sets the text-align value to its default

While it is primarily used for aligning text, the text-align property can apply to any inline content that is contained in a block element such as a span or div.

text-decoration

The text-decoration property applies decoration to text, typically in the form of a line below, above or through the text.

Possible values include:

  • underline – Draws a line under text
  • overline – Draws a line over text
  • line-through – Draws a line through the center of text (i.e. a strikethrough)
  • none – Does not apply decoration to text (the default value)
  • inherit – Inherits the text-decoration value from the parent element
  • initial – Sets the text- decoration value to its default

text-transform

The text-transform property is used to control the capitalization of text.

Possible values include:

  • uppercase – Converts all characters to uppercase
  • lowercase – Converts all characters to lowercase
  • capitalize – Capitalizes the first character in each word
  • none – Does not transform text and leaves it as-is (the default value)
  • inherit – Inherits the text-transform value from the parent element
  • initial – Sets the text-transform value to its default

text-indent

The text-indent property is used to specify the indentation of the first line of text contained in an element.

Possible values include:

  • Length – A numeric value expressed as an absolute or relative measurement unit such as px, pt, em, or rem. The default length is 0.
  • % – A value expressed in terms of the percentage of the containing element
  • inherit – Inherits the text-indent value from the parent element
  • initial – Sets the text-indent value to its default

Negative values are allowed for length – the first line of text would simply be indented to the left.

line-height

The line-height property specifies the height of each line of text contained in an element, which determines whether lines appear closer together or farther apart from each other.

Possible values include:

  • Length – A numeric value that represents a fixed line height, expressed as an absolute measurement unit such as px or pt
  • Number – A numeric value that represents a multiple of the current font size
  • % – A value expressed in terms of the percentage of the current font size
  • normal – Applies a normal line height. This is the default value.
  • inherit – Inherits the line-height value from the parent element
  • initial – Sets the line-height value to its default

letter-spacing

The letter-spacing property specifies the amount of spacing between characters in a line of text.

Possible values include:

  • length – A numeric value expressed as an absolute or relative measurement unit such as px, pt, em, or rem. The default length is 0.
  • normal – Does not add space between characters. This is the default value.
  • inherit – Inherits the letter-spacing value from the parent element
  • initial – Sets the letter-spacing value to its default

Negative values are allowed for letter-spacing – characters would simply overlap if a negative value was applied.

word-spacing

The word-spacing property specifies the amount of spacing between words in a line of text.

Possible values include:

  • length – A numeric value expressed as an absolute or relative measurement unit such as px, pt, em, or rem. The default length is 0.
  • normal – Does not add space between characters. This is the default value.
  • inherit – Inherits the letter-spacing value from the parent element
  • initial – Sets the letter-spacing value to its default

Negative values are allowed for word-spacing – words would simply overlap if a negative value was applied.