Tipografia - Design System

Fomos cuidadosos em deixar a tipografia o mais simples possível dentro de nosso Design System. Com 3 estilos de texto, é possível diagramar todos os designs da empresa. Em casos especiais, nós também criamos designs que não utilizam os estilos mas que mantém a essência da marca.

klavika

A única fonte utilizada em todo o Clube FII é a Klavika. Desenhada por Eric Olson em 2004, é uma fonte séria, robusta e que atende todas as demandas necessárias para transmitir da melhor forma possivel o que é mais vital a nossos usuários: informação. O Clube FII utiliza 4 de suas variações: light, regular, medium e bold.

estilos de texto

O Clube FII utiliza 4 estilos de texto. Com esses estilos combinados um com o outro, é possível compor qualquer design, seja pra web, mobile ou páginas impressas.

headers

Sempre com os caracteres em caixa alta, nossos headers aparecem normalmente acompanhados de texto corrido.

large Klavika Light / 46pt

                        
                            .font-header-large {
                                font-family:  'Klavika Lt';
                                font-size:  46px;
                                line-height: 56px;
                                letter-spacing: 12px;
                                text-transform:  uppercase;
                            }

medium Klavika Light / 36pt

                        
                            .font-header-medium {
                                font-family:  'Klavika Lt';
                                font-size:  36px;
                                line-height: 46px;
                                letter-spacing: 8px;
                                text-transform:  uppercase;
                            }

small Klavika Light / 26pt

                        
                            .font-header-small {
                                font-family:  'Klavika Lt';
                                font-size:  26px;
                                line-height: 34px;
                                letter-spacing: 5px;
                                text-transform:  uppercase;
                            }

supersmall Klavika Light / 22pt

                        
                            .font-header-supersmall {
                                font-family:  'Klavika Lt';
                                font-size:  22px;
                                line-height: 30px;
                                letter-spacing: 4.23px;
                                text-transform:  uppercase;
                            }

subtitles

Sempre com os caracteres em caixa alta, podem ser usados como títulos acompanhados de texto longo, ou subtitulos acompanhados de headers ou em combinação dos 3 estilos juntos.

large Klavika Bold / 18pt

                        
                            .font-subtitle-large {
                                font-family:  'Klavika Bd';
                                text-transform:  uppercase;
                                font-size:  18px;
                                line-height: 22px;
                                letter-spacing: 2px;
                            }

medium Klavika Bold / 14pt

                        
                            .font-subtitle-medium {
                                font-family:  'Klavika Bd';
                                text-transform:  uppercase;
                                font-size:  14px;
                                line-height: 18px;
                                letter-spacing: 1.56px;
                            }

small Klavika Bold / 12pt

                        
                            .font-subtitle-small {
                                font-family:  'Klavika Bd';
                                text-transform:  uppercase;
                                font-size:  12px;
                                line-height: 16px;
                                letter-spacing: 1.33px;
                            }

body

Utilizadas em textos longos, de explicação. Normalmente acompanhadas de Header ou Subtitle.

Extra Large Klavika Light / 32pt

                        
                            .font-body-extralarge {
                                font-family:  'Klavika Lt';
                                font-size:  32px;
                                line-height: 46px;
                                letter-spacing: 2px;
                            }

Large Klavika Medium / 22pt

                        
                            .font-body-large {
                                font-family:  'Klavika Bd';
                                font-weight:  500;
                                font-size:  22px;
                                line-height: 27px;
                            }

Medium Klavika Regular / 18pt

                        
                            .font-body-medium {
                                font-family:  'Klavika Rg';
                                font-size:  18px;
                                line-height: 26px;
                            }

Small Klavika Regular / 12pt

                        
                            .font-body-small {
                                font-family:  'Klavika Rg';
                                font-size:  12px;
                                line-height: 16px;
                                letter-spacing: 0.5px;
                            }

Super small Klavika Regular / 10pt

                        
                            .font-body-supersmall {
                                font-family:  'Klavika Rg';
                                font-size:  10px;
                                line-height: 12px;
                                letter-spacing: 0.5px;
                            }