/about/font
En esta página se presenta la documentación relacionada con las fuentes tipográficas de Bkool y de el giro. Para ver las distintas fuentes juegue con el botón de cambiar estilos entre Bkool y el Giro.
HKGothic
A Ă Â B C Č Ć D Đ E Ê F G H I J K L M N O Ô Ơ P Q R S Š T U Ư V W X Y Z Ž a ă â b c č ć d đ e ê f g h i j k l m n o ô ơ p q r s š t u ư v w x y z ž 1 2 3 4 5 6 7 8 9 0 ‘ ? ’ “ ! ” ( % ) [ # ] { @ } / & < - + ÷ × = > ® © $ € £ ¥ ¢ : ; , . *
Dedicado para headings y titles.
HKGrotesk
A Ă Â B C Č Ć D Đ E Ê F G H I J K L M N O Ô Ơ P Q R S Š T U Ư V W X Y Z Ž a ă â b c č ć d đ e ê f g h i j k l m n o ô ơ p q r s š t u ư v w x y z ž 1 2 3 4 5 6 7 8 9 0 ‘ ? ’ “ ! ” ( % ) [ # ] { @ } / & < - + ÷ × = > ® © $ € £ ¥ ¢ : ; , . *
Dedicado para cuerpo de texto y componentes.
La configuración de la tipografía la podemos encontrar en el fichero theme. En el caso de los estilos de Bkool se llama theme y en el caso de los estilos del Giro se llama themeGiro.
// src/theme/theme.js
let theme = createTheme({
...
typography: {
fontFamily: bkTypographyBase,
h1: {
fontFamily: bkTypographyHeading,
fontWeight: 600,
fontSize: '1.75rem',
lineHeight: '2.125rem',
'@media (min-width:768px)': {
fontSize: '3.25rem',
lineHeight: '3.875rem',
},
},
h2: {
fontFamily: bkTypographyHeading,
fontWeight: 600,
fontSize: '1.5rem',
lineHeight: '2rem',
'@media (min-width:768px)': {
fontSize: '1.75rem',
lineHeight: '2.25rem',
},
},
h3: {
fontFamily: bkTypographyHeading,
fontWeight: 600,
fontSize: '1.375rem',
lineHeight: '1.625rem',
'@media (min-width:768px)': {
fontSize: '1.625rem',
lineHeight: '2rem',
},
},
h4: {
fontFamily: bkTypographyHeading,
fontWeight: 600,
fontSize: '1.125rem',
lineHeight: '1.313rem',
'@media (min-width:768px)': {
fontSize: '1.375rem',
lineHeight: '2rem',
},
},
h5: undefined,
h6: undefined,
subtitle1: undefined,
subtitle2: undefined,
body1: {
fontFamily: bkTypographyBase,
fontWeight: 400,
fontSize: '1rem',
lineHeight: '1.313rem'
},
body2: {
fontFamily: bkTypographyBase,
fontWeight: 400,
fontSize: '0.8125rem',
lineHeight: '1.313rem'
},
button: {
fontFamily: bkTypographyButton,
fontWeight: 700,
fontSize: '1rem',
lineHeight: '1.5rem',
textTransform: 'none'
},
caption: {
fontFamily: bkTypographyCaption,
fontWeight: 600,
fontSize: '0.75rem',
lineHeight: '1rem',
textTransform: 'uppercase',
letterSpacing: '0.125rem'
},
}
});// src/theme/theme.js
let themeGiro = createTheme({
...
typography: {
fontFamily: giroTypographyBase,
h1: {
fontFamily: giroTypographyBase,
fontWeight: 600,
fontSize: '3rem',
lineHeight: '2.125rem',
'@media (min-width:768px)': {
fontSize: '3.25rem',
lineHeight: '3.875rem',
},
},
h2: {
fontFamily: giroTypographyBase,
fontWeight: 600,
fontSize: '2rem',
lineHeight: '2rem',
'@media (min-width:768px)': {
fontSize: '1.75rem',
lineHeight: '2.25rem',
},
},
h3: {
fontFamily: giroTypographyBase,
fontWeight: 600,
fontSize: '1.5rem',
lineHeight: '1.625rem',
'@media (min-width:768px)': {
fontSize: '1.625rem',
lineHeight: '2rem',
},
},
h4: {
fontFamily: giroTypographyBase,
fontWeight: 600,
fontSize: '1.313rem',
lineHeight: '1.313rem',
'@media (min-width:768px)': {
fontSize: '1.375rem',
lineHeight: '2rem',
},
},
h5: undefined,
h6: undefined,
subtitle1: undefined,
subtitle2: undefined,
body1: {
fontFamily: giroTypographyBase,
fontWeight: 400,
fontSize: '1rem',
lineHeight: '1.313rem'
},
body2: {
fontFamily: giroTypographyBase,
fontWeight: 400,
fontSize: '0.8125rem',
lineHeight: '1.313rem'
},
button: {
fontFamily: giroTypographyBase,
fontWeight: 700,
fontSize: '1rem',
lineHeight: '1.5rem',
textTransform: 'none'
},
caption: {
fontFamily: giroTypographyBase,
fontWeight: 600,
fontSize: '0.75rem',
lineHeight: '1rem',
textTransform: 'uppercase',
letterSpacing: '0.125rem'
},
},
});