Sobre tipografia

[felipefialho]

Fala pessoal,

Como sabem, utilizo o Rucksack para me dar uma força com tipografia responsiva, e hoje li um artigo ótimo da Smashing Magazine sobre o assunto.

Então resolvi abrir uma discussão sobre tipografias, que é uma parte bem delicada do projeto.

Deixo um arquivo de core com as variaveis e mixins bases, onde chamo em vários locais do projeto e utilizo uma class .content para trabalhar com a ideia de textos.

Como costumam trabalhar tipografias?

[filipelinhares]

Como ferramenta para definir as fontes e tamanhos eu sempre uso o type-scale e o Typecast. Na maioria dos projetos eu adiciono o typ que me ajuda com uma base e eu configuro o que precisar.

Depois de conhecer o Rucksack to pensando em começar a usar.

Links úteis

• fontfamily.io
• fontpair
• Precise control over responsive typography

[kandebonfim]

Resposta que dei pra um colega meu no projeto que estou trabalhando no momento.

...There are basically 4 options to have a precise control over typography sizes:

1 - Multiple media queries

We can set the font-styles for each media query and for each element. The final result is a lot of CSS but a very precise font-size.

2 - Using calc()

An alternative for setting a font-size in pixels but keep it fluid is to use calc() so it can change between a minimum and maximum values.

I'm adding this logic demonstration below.

3 - px to rem

Implement a mixin similar to this one and use it to set the font-sizes.

4 - Percentage

Setting font-size using percentage units can look kinda messy at first sight but it makes sense once that you consider there ain't no such thing as the main screen and when we are inspecting the font size in Sketch, we are seeing an absolute value for a specific screen size. Using the percentage approach, we can cover all screen sizes without hardcoding the font-sizes.

In conclusion

It does not make sense to set a font-size using px units and then make it fluid. It is like setting a width multiple times using pixels in different media queries instead of just setting width: 25% or something like that.

After all, using percentage will make all font-sizes proportional by rule since they are all based on the same values.

[kandebonfim]

Depois mandei isso aqui:

We can pick any of the options above. But after studying the subject I believe that the percentage and calc() approaches are the best ones. Since the calc() approach uses calc() and vw (they are not very supported in major browsers) we should use percentage as a fallback. It ends up using percentage solution is the more effective.