Font Weight
Utilities for controlling the font weight of an element.
React props | CSS Properties |
---|---|
fontWeight={weight} | font-weight: {weight}; |
Usage
Control the font weight of an element using the fontWeight={weight}
utilities.
<x.p fontWeight="hairline">Computers have lots ...</x.p> <x.p fontWeight="thin">Computers have lots ...</x.p> <x.p fontWeight="light">Computers have lots ...</x.p> <x.p fontWeight="normal">Computers have lots ...</x.p> <x.p fontWeight="medium">Computers have lots ...</x.p> <x.p fontWeight="semibold">Computers have lots ...</x.p> <x.p fontWeight="bold">Computers have lots ...</x.p> <x.p fontWeight="extrabold">Computers have lots ...</x.p> <x.p fontWeight="black">Computers have lots ...</x.p>
Responsive
To control the space between elements at a specific breakpoint, use responsive object notation. For example, adding the property fontWeight={{ md: "bold" }}
to an element would apply the fontWeight="bold"
utility at medium screen sizes and above.
<x.div fontWeight={{ xs: 'thin', md: 'bold' }}>{/* ... */}</x.div>
For more information about xstyled's responsive design features, check out Responsive Design documentation.
Customizing
Font Weights
If you'd like to customize your values for font weights, use the theme.fontWeights
section of your theme.
// theme.js
export const theme = {
fontSizes: {
- hairline: 100,
+ 'extra-light': 100,
- thin: 200,
light: 300,
normal: 400,
medium: 500,
+ semibold: 600,
bold: 700,
- extrabold: 800,
+ 'extra-bold': 800,
black: 900,
},
}
If you don't want to customize it, a set of fontWeights
is already defined in default theme:
const defaultTheme = {
// ...
fontWeights: {
hairline: '100',
thin: '200',
light: '300',
normal: '400',
medium: '500',
semibold: '600',
bold: '700',
extrabold: '800',
black: '900',
},
}
Styled bindings
Automatic
Using xstyled's styled
, all font weights defined are automatically bound to font-weight
attribute:
import styled from '@xstyled/...' const Title = styled.h4` font-weight: semibold; `
To learn more about styled syntax, read styled syntax documentation.
Manual
It is possible to manually bind a font size using th.fontWeight
utility:
import styled from '...' import { th } from '@xstyled/system' const Title = styled.h4` font: ${th.fontWeight('semibold')}; `
Hooks
Get a font size in any component using useFontWeight
hook:
Edit this page on GitHubimport { useFontWeight } from '@xstyled/...' function Title() { const fontWeight = useFontWeight('semibold') }