Font Style

Utilities for controlling the font family of an element.

Italics

Use fontStyle="italic" to make text italic.

<x.p fontStyle="italic">
  Computers have lots of memory but no imagination.
</x.p>

Undo italics

Use the fontSize="normal" utility to display text normally. This is typically used to reset italic text at different breakpoints.

<x.p fontStyle="normal">
  Computers have lots of memory but no imagination.
</x.p>

Responsive

To control the space between elements at a specific breakpoint, use responsive object notation. For example, adding the property fontStyle={{ md: "italic" }} to an element would apply the fontStyle="italic" utility at medium screen sizes and above.

<x.p fontStyle={{ md: 'italic' }}>{/* ... */}</x.p>

For more information about xstyled's responsive design features, check out Responsive Design documentation.