타이포그래피 (활자, Typography)
타이포그래피는 어플리케이션의 기능만큼 중요합니다. Vuetify.js는 메테리얼 디자인 스팩의 Roboto Font 를 사용합니다. 각 헤딩(heading) 크기를 정하는 관련 헬퍼 클라스를 이용해서 여러 컴포넌트의 스타일을 통일할 수 있습니다.
Font sizes
Typography helper classes allow you to easily style text according to Material Design sizing.
.display-4- Good for<h1>.display-3- Good for<h2>.display-2- Good for<h3>.display-1- Good for<h4>.headline- Good for<h5>.title- Good for<h6>.subheading- Good for supporting text.body-2- Regular body text with additional weight.body-1- Regular body text.caption- Smaller size text
.display-4Light 112sp
.display-3Regular 56sp
.display-2Regular 45sp
.display-1Regular 34sp
.headlineRegular 24sp
.titleMedium 20sp
.subheadingRegular 16sp
.body-2Medium 14sp
.body-1Regular 14sp
.captionRegular 12sp
Font weights
Material design supports 100, 300, 400, 500, 700, 900 font weights.
.font-weight-thin- Sets font-weight to 100.font-weight-light- Sets font-weight to 300.font-weight-regular- Sets font-weight to 400.font-weight-medium- Sets font-weight to 500.font-weight-bold- Sets font-weight to 700.font-weight-black- Sets font-weight to 900
Text can also have an italic applied to it.
.font-italic - Sets the font-style to italic
Roboto Thin
.font-weight-thin
Roboto Light
.font-weight-light
Roboto Regular
.font-weight-regular
Roboto Medium
.font-weight-medium
Roboto Bold
.font-weight-bold
Roboto Black
.font-weight-black
Roboto Thin Italic
.font-weight-thin.font-italic
Roboto Light Italic
.font-weight-light.font-italic
Roboto Regular Italic
.font-weight-regular.font-italic
Roboto Medium Italic
.font-weight-medium.font-italic
Roboto Bold Italic
.font-weight-bold.font-italic
Roboto Black Italic
.font-weight-black.font-italicText transforms
Control the casing with a text transform.
.text-capitalize- Sets text-transform to capitalize.text-lowercase- Sets text-transform to lowercase.text-none- Sets text-transform to none.text-uppercase- Sets text-transform to uppercase
Text wrapping
Force text to not wrap or truncate it if its too long.
.text-no-wrap- Sets whitespace to no-wrap.text-truncate- Truncates overflowed text