I comprehend the wisdom of “responsive” typesetting and encountered the problem of typography, specifically, font sizes. I read a couple of articles and flipped through the book , then sat down at the layout. After thinking for a while, I decided to use viewport units. It would seem, what is simpler: you take the size of the text (32px), divide by the width of the viewport (1920px), you get the result 1,666666666666666vw, which you apply in the style sheet. However, when the viewport size is 960px, the font size will be 16px (this is normal), but at a resolution of 760px, the font size is 12.66667px and accordingly decreases proportionally, becoming unreadable on mobile devices. And this is with a base font of 32px. If the text on a 1920px layout is 16px, then already on laptops with tablets it will be problematic to read it. In this regard, I ask the community for advice: how to organize the right "responsiveness" of typography?

  • one
    I do not agree with the idea. For me, it is better to leave the fonts unchanged in the adapter - for this is the base for presenting information. You do not want ugly large fonts - manipulate the scale of the page (with the meta viewport tag, which can also be controlled from JS) - for example, set the minimum width beyond which the page does not shrink. Otherwise there is a double job. IMHO. - Goncharov Alexander

3 answers 3

There is a fairly recent (from August 17, 2016) article with a technique, just for smoothly changing typography - font size and leading in a given range: http://blog.typekit.com/2016/08/17/flexible-typography-with- css-locks /

And the same fresh PostCSS plugin that implements the technique: https://github.com/bramstein/postcss-scale

    You can use media queries for different screen widths:

    @media (min-width: 768px) { .my-text{ font-size: 10px; } } @media (min-width: 992px) { .my-text{ font-size: 12px; } } @media (min-width: 1200px) { .my-text{ font-size: 14px; } }
    • with this approach, resizing occurs in steps. Pay attention to the given example: it is not hypothetical. If I apply media queries, then the font size change is too “ragged”: 32px, 18px, 16px, 12px ... - LivAlex
    • There is a very recent article on the smooth change. I haven’t read it yet and haven’t applied it, so I cannot form a complete answer, but I’m sharing a link: blog.typekit.com/2016/08/17/flexible-typography-with-css-locks - Vitaly Yemelyantsev
    • through the media you can make a "fork" with a minimum and maximum font size, and that in the middle - smoothly - Dmitry Kozlov
    • @DmitryKozlov, share a sample, if not a pity :) - LivAlex
    • one
      @gambala helped me to link to the article, make your comment a response, I will mark it as true. - LivAlex

    It is worth trying to use the relative units of measure em or rem.
    em - sets the size relative to the font of the parent.
    rem - sets the size relative to the font of the entire html document.
    An article with em and rem examples