Размер текста

Как изменять размер шрифта в зависимости от размера экрана?

Всем здравствуйте!
Подскажите пожалуйста, как изящно сделать изменение шрифта для различного размера экрана?
Например:
Есть заголовок

Blabla

— на экране десктопа он выглядит вполне достойно при размере в 36px, но на телефоне он уже с трудом входит в экран (условно). Если же поставить размер в зависимость от % или от ширины vw, то из-за линейной зависимости на телефоне будет практически ничего не видно.
Гугл подсказывает, что можно в @media ставить конкретные значения (не плохой вариант) или использовать JS чтобы подгонять размер по месту.
То же касается отступов сверху, снизу.
Как вы считаете это можно сделать наиболее красиво?
Спасибо!

Можно поставить размер шрифта в зависимости от размеров экрана, но через calc() задавать минимальное значение.

В этом примере ( codepen.io/paulradzkov/pen/jqYqgY ) размер шрифта заголовка никогда не будет меньше 16px (1em):

Можно использовать более сложные формулы совместно с @media . Тут размер шрифта плавно меняется от 14 до 18px в диапазоне от 480 до 1024px.

@media (min-width: 480px) and (max-width: 1024px) < p < font-size: calc(14px + (18 - 14) * ( (100vw - 480px) / ( 1024 - 480) )); >>

До 480 и после 1024px размер задан жестко с использованием @media .

Но в целом это все сложно и редко нужно. Я обычно задаю размер фиксированно на двух-трёх диапазонах при помощи @media .

UPD: можно даже заставить текст максимально заполнять площадь вьюпорта codepen.io/CrocoDillon/pen/fBJxu

Источник

Responsive Font Size (Optimal Text at Every Breakpoint)

Responsive web design is not only about dynamic layouts, font size can be responsive too.

On small screens, there’s not much room so it makes sense to use the smallest font you can without compromising readability. The consensus is mobile font size should be 16px (source, source).

On tablet and desktop, you have more screen real estate so you can afford to make the text size a bit bigger. A good font size for large devices is 18px — 20px.

So what’s the best way to set these sizes?

How To Make Font Size Responsive

To make font size responsive in steps, set the base font size at each breakpoint. To create fluid text that smoothly changes size, use the calc() function to calculate a ratio between pixels and viewport widths, this will make the base font size grow at the correct rate relative to the screen width.

Stepped Responsive Font Size

To achieve a stepped font size, we simply set the exact base font size that we want for each breakpoint. Here’s what that looks like in CSS:

html < font-size: 16px; >@media (min-width:768px) < font-size: 18px; >@media (min-width:1024px) < font-size: 19px; >@media (min-width:1280px)

There are two problems with this method:

• The font size is only optimal at particular breakpoints, in between it might feel too big or too small.
• It’s verbose. We have to explicitly set the font size for each breakpoint which requires a lot of CSS rules.

Fortunately, there’s a simpler way.

Fluid Responsive Font Size

Rather than setting the font size at each breakpoint, we can create a formula to calculate our font size relative to the screen width. We do that with the calc() function.

calc() is supported in all modern browsers so it’s safe and reliable to use (source).

Here’s how our font size formula looks in CSS:

This formula calculates our font size as 15px plus 0.00390625% of the screen width. These values have been specifically chosen because they result in the perfect font sizes at every breakpoint:

Fluid font sizes per breakpoint

This method is both simple and powerful.

Want an example? This website (that you’re reading right now) uses exactly this method of achieving responsive font size. Adjust your browser window to see it in action!

Setting Relative Font Sizes with Responsive Text

When using responsive font sizes, use rem units to specify any text that needs to be relative in size to your base font size.

Using rems in this way will maintain the proportions between all font sizes so they always look good.

Want responsive padding too? See my article: Responsive Padding, Margin & Gutters With CSS Calc

Are IDs or classes better? My guide has the answer: ID vs Class: Which CSS Selector Should You Use? (6 Examples).

“I’ve been developing websites professionally for over two decades and running this site since 1997! During this time I’ve found many amazing tools and services that I cannot live without.”
— Matthew James Taylor

I highly Recommend:

Ezoic — Best ad network for publishers

Earn more than double the revenue of Google Adsense. It’s easy to set up and there’s no minimum traffic requirements.

SiteGround — Best Website Hosting

Professional WordPress hosting with 24/7 customer support that is the best in the industry, hands down!

Surfer SEO — Best Content Optimization Tool

Use the power of AI to optimise your website content and increase article rankings on Google.

Canva — Best Graphic Design Software

Create professional graphics and social media imagery with an intuitive online interface.

Web design Architecture Life drawing Art gallery Synesthesia Comics

Источник

Viewport Sized Typography

There are values in CSS that are for sizing things in relation to the viewport (the size of the browser window). They are called viewport units, and there are a number of them that do slightly different (all useful) things. One unit is 1% of one of the axes of the viewport. These can be useful for responsive design, that is, designing websites that look good across different screen sizes, taking advantage of the space available to them. There are many things you can do with viewport units, but let’s look at one in particular: typography. It’s worth looking at our more recent post Simplified Fluid Typography for practical, clamped, viewport-based type sizing.

1. There is a such thing as a comfortable line length for reading text on screens. I don’t want to kick a hornet’s nest, but let’s say its around 80 characters. These units allow you to get it feeling perfect and then have that experience scale to any size screen.
2. They allow you to tightly couple the size relationship of, say, a typographic header and the content it goes with. Like your classic Trent Walton style blog post.

One unit on any of the three values is 1% of the viewport axis. “Viewport” == browser window size == window object. If the viewport is 40cm wide, 1vw == 0.4cm.

For use with font-size , I guess it’s one “letter” that takes on that size, but as we know, in non-mono-spaced fonts the width of a letter is rather arbitrary. I find you just need to tweak around with the values to get it how you want it. Which is basically what we do anyway, right?

• 1vw = 1% of viewport width
• 1vh = 1% of viewport height
• 1vmin = 1vw or 1vh , whichever is smaller
• 1vmax = 1vw or 1vh , whichever is larger

Here’s a video of a simple layout using vw units for the font-size .

Check out the demo yourself (see browser support).

Or here’s a GIF for a super simple header:

The support is there in Chrome 20+ / Safari 6+, but it fails in one rather significant way. When the browser window is resized, the font doesn’t adjust itself according to the new viewport size. The spec says:

When the height or width of the viewport is changed, they are scaled accordingly.

I bugged it. Perhaps not a huge disaster as it’s pretty much just us design nerds that go around adjusting browser windows, but still. The font does adjust on a fresh page load.

To fix this issue (allow resizing without page refresh) you need to cause a “repaint” on the element. I used jQuery and just fiddled with each elements (irrelevant, in this case) z-index value, which triggers the repaint.

causeRepaintsOn = $("h1, h2, h3, p"); $(window).resize(function() < causeRepaintsOn.css("z-index", 1); >);

UPDATE: Don’t worry about this anymore and definitely don’t be forcing those repaints. This resizing issue is fixed in Chrome 34+ and Safari 7+. It’s not common to change the viewport size on mobile devices, so I’m not sure if this bug ever affected them or not.

IE 10+, Firefox 19+, Chrome 34+, Safari 7+, Android 4.4+, iOS 6+ – Supported

Chrome 20-34, Safari 6 – Supported but has repaint issue

There are a couple of other specific cross-browser weirdnesses with them, documented on Can I Use.

For the record, these are just units. Just like em , px , whatever. You can use them on anything, not just font-size .

I think font-size is the most compelling use case, since things like margin, padding, and width can already essentially react to browser window size by using % units. There is the case where perhaps a more deeply-nested element needs to react to the browser window size instead of its direct parent size.

You’ll at least want to provide a fallback:

Modernizr doesn’t have a test for it yet, but you can test for it yourself by using some throw-away element that you see to some narrow width in CSS but then re-set to 100vw in JavaScript, then measure to see if the width of it is equal to window.width. Something like:

var testEl = $("#vw-test"); testEl.css(< width: "100vw" >); if (testEl.width() == window.innerWidth) < // Supported >else < // Not Supported >;

Here’s that test on CodePen, but note it only works in Full Page view otherwise the calculation might be off because of iframe issues.

Mimic the functionality with FitText.js

This idea of binding the overall width of a header with the width of its parent element is exactly what FitText.js does. Only it does it through fancy JavaScript and math and spans and stuff. Theoretically, you could run the test and use Modernizr.load to load up FitText.js if no support is detected.

Источник

Как менять размер текста при изменении размера окна?

Для изменения размера текста веб-страницы совместно с окном браузера есть несколько методов. Рассмотрим наиболее популярные.

Использование единиц vw

Размер текста задаётся с помощью свойства font-size, в качестве значения можно указывать разные единицы — пиксели, пункты, миллиметры и др. Единица vw (от англ. viewport width — ширина области просмотра) соответствует 1% от ширины окна браузера, таким образом, при изменении этой ширины будет меняться и размер текста (пример 1).

Пример 1. Использование vw

Результат данного примера показан на рис. 1.

Рис. 1. а — текст на широком окне; б — текст на узком окне

У единицы vw есть несколько недостатков — главное, что текст уменьшается пропорционально вместе с окном и в какой-то момент становится нечитаемым. Это будет особенно заметно на смартфонах, где ширина экрана меньше ширины мониторов. Чтобы установить минимальный размер текста можно воспользоваться функцией calc(), как показано в примере 2.

Пример 2. Использование calc()

Здесь мы смешиваем разные единицы — для заголовка rem и vw, для основного текста пиксели и vw. Использование calc() гарантирует, что текст не станет меньше указанного значения (для заголовка, к примеру, это 1rem).

Использование медиа-запросов

Поскольку единицы vw завязаны на ширину области просмотра, то при увеличении размера окна увеличивается и размер текста. Иногда требуется сделать наоборот — на маленьких экранах показывать большой текст, а на больших экранах, соответственно, маленький текст. Для этого применяются медиа-запросы, они меняют стиль элементов при определённой ширине окна браузера.

Сперва определяем стиль для больших экранов, затем с помощью конструкции @media screen and (max-width: 1024px) задаём стиль для экранов с шириной до 1024 пикселей. Внутри @media пишется размер текста под этот размер. При желании ниже добавляем ещё несколько @media с разными значениями max-width (пример 3).

Пример 3. Использование @media

Размер текста в данном случае будет меняться не плавно, а ступенчато — при достижении указанной ширины окна размер текста уменьшается или увеличивается.

См. также

Источник