Как изменить размер текста через css

When you want to draw attention to a piece of text on a page, few things are more effective than increasing the font size. And to do that, you’ll need to understand the CSS font-size property.

The size of your fonts draws the reader’s eye and establish a visual hierarchy. You’ll notice in this blog post that the title (<h1>) has the largest font size. Next, the heading elements (<h2>, <h3>, and <h4>) decrease in size until we reach the <p> elements beneath them.

Say you want to shrink or enlarge the default heading sizes, or you want to change the font size of other elements on the page. In that case, you can change the font size in CSS.

In this post, we’ll show you how to use the CSS font-size property, including:

• using an absolute-size unit
• using a relative-size unit
• using length value (like pixels, rems, or rems)
• using a percentage value
• using vw units to make font size responsive

font-size is the CSS property that controls the size of text on a webpage. There are several values you can use to define the font-size property. The example below includes different values and units you can use in CSS. The one you choose will depend on the needs and goals of your site.

See the Pen font-size: different values by HubSpot (@hubspot) on CodePen.

Let’s take a closer look at these values and discuss the pros and cons of each.

Absolute-size keyword

Absolute-size keywords are based on the default font size. Most commonly, the default font size is medium (which translates to 16 pixels or 1 em) though it can differ by browser and font family. Note that in HTML the default font size is 16 pixels.

The absolute-size keywords are:

• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large
• xxx-large

Here’s how each one looks in a browser:

See the Pen font-size: absolute size by HubSpot (@hubspot) on CodePen.

Absolute-size keywords make it easy to set text to a specified size and create a font hierarchy for your page.

However, they do not allow a user to change the text size in all browsers, which makes it a poor choice for accessibility. To be more inclusive of all users, try relative-size keywords instead.

Relative-size keyword

Relative-size keywords set the font larger or smaller relative to the parent element’s font size. Relative sizes are roughly based on the ratio of the absolute-size keywords described above.

So, if a parent element has a font-size of large, a child element with a font-size of smaller will look as if it’s font size were medium. Let’s look at the code of this hypothetical.

See the Pen font-size: relative size by HubSpot (@hubspot) on CodePen.

Relative-size keywords make it easy to set text size relative to surrounding elements. Their advantage over absolute-size keywords is that they allow users to change the text size in all browsers, which makes it a good choice for accessibility.

Length

There are a few length values you can assign to the font-size property. Here, we’ll focus on the three most common: pixels, em units, and rem units.

Pixels

Using pixels (px) as your length lets you set fontsize with precision, regardless of the browser a visitor is using. It specifies exactly the number of pixels in height that you want a browser to render your text.

See the Pen font-size: px by HubSpot (@hubspot) on CodePen.

However, the fixed nature of pixels is also a drawback. They’re not optimized for all devices — CSS-Tricks found that websites on the iPad mini render the same as websites on the iPad, for example — and they’re not an accessible length value.

Because users cannot change the font size in some browsers, there are more inclusive and responsive options you can use, like em and rem. We’ll discuss those next.

Ems

The em unit sets the font size relative to the font size of the parent element. So, giving text a font-size of 2em will make this text twice the size of its surrounding text.

Setting font size in em units is ideal for an inclusive design. Since ems are a relative unit, users can adjust the text size in all browsers.

The only drawback is that ems compound. So, say a <span> element with a font size of 2em contains another <span> element. The nested <span> element would be twice the size, or 4em. See the code below.

See the Pen font-size: em by HubSpot (@hubspot) on CodePen.

Fortunately, the rem unit solves this compounding problem.

Rems

Rems are a relative unit like ems, but they don’t compound. That’s because ems are font-relative units, meaning the font size is relative to the parent element’s font size, while rems are root-based. This means that font size is relative to the size of the font used by the <html> element, also called the root element.

Say I set the font size of the root element to 12px so that any text in the document that isn’t modified by CSS will be 12 pixels. But, I also want to change the font size of a <div> element that’s similar to the one mentioned in the example above. Let’s look at the code for that below.

See the Pen font-size: rem by HubSpot (@hubspot) on CodePen.

Notice how the nested <span> element is the same font size as the other <span> element.

For more guidance on when to use the px unit versus the rem unit, check out this helpful explainer video:

Percentage

A percentage value sets the font size of an element relative to the parent element’s font size.

Say a <div> element that’s set to 36px contains two <p> elements. The font-size of the first paragraph is set to 50% and the second paragraph is set to 200%. The first <p> element will be 18 pixels and the second will be 27 pixels. Here’s how that code looks in action:

See the Pen font-size: percentage by HubSpot (@hubspot) on CodePen.

Responsive Text

The property values described above all have one thing in common: They are not responsive. If you’d like to set your font size to be responsive for all devices and displays, you can use the viewport width unit, shortened to vw.

The vw unit is another relative unit. However, it’s not relative to a parent element or root element, but to the width of the viewport. To be exact, 1 vw is equal to 1% of the viewport. Meaning, if the viewport is 100 pixels wide, 1vw equals 1 pixel.

Say I want the font size of my paragraph to be 10% of the width of the browser window. Here’s what the code looks like:

See the Pen font-size: vw by HubSpot (@hubspot) on CodePen.

And here’s what the text looks like when we resize the viewport:

Max Font Size in CSS

When setting your font size in vm units, be careful that your text doesn’t get too big on large screens. Unfortunately, CSS doesn’t have “max font size” property, but you can prevent your font from getting too big by using media queries.

You just have to use the media query at a certain screen size breakpoint and force the font size back into a set pixel value. Say I want to force my font size back to 30px when the viewport exceeds 1000px. Here’s what the code looks like:

See the Pen font-size: vw with media query by HubSpot (@hubspot) on CodePen.

And here’s what the text looks like when we resize the viewport:

Controlling Font Size

Changing font size in CSS is complex when compared to the ease of changing font size in Google Docs or Microsoft Word — but it can be mastered with some practice in HTML and CSS.

Editor’s note: This post was originally published in May 2020 and has been updated for comprehensiveness.

Продолжаем говорить о размерах в CSS. Мы уже разбирали пиксели, проценты и зависимость от окна браузера, а теперь посмотрим на особенности размеров шрифтов.

Коротко о том, что уже было: пиксели и высота экрана

Самый простой способ задать размер чего-нибудь на веб-странице — указать его в пикселях:

font-size: 16px;

Также можно указать размер в виде пропорций от ширины или высоты браузера. Например, чтобы размер шрифта был 1/10 от высоты окна. Необычно, но может быть интересно:

font-size: 10vh;

Проценты и шрифты

Ещё есть проценты, но с ними сложнее: нужно знать размеры родительского элемента, чтобы процентам было от чего отталкиваться. Например, если мы просто напишем  font-size: 50%;, то браузер сделает так:

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="utf-8">
	<title>Размеры шрифтов</title>

	<style type="text/css">
		/*задаём общие параметры для всей страницы*/
		body {
		  text-align: center;
		  margin: 10;
		  font-family: Verdana, Arial, sans-serif;
		  font-size: 40px;
		}
		
	</style>

</head>
<body>

	<p>Привет, это журнал «Код»!</p>
	
</body>
</html>

Теперь добавим отдельный стиль для абзаца и в нём укажем, что размер текста должен быть 50%:

p {
font-size: 50%;
}


А вот что будет, если мы удалим размер в пикселях из стиля body{} и дадим браузеру самому разобраться с размером:

Так как мы не задали точные размеры, то браузер взял какой-то свой размер абзаца по умолчанию и посчитал 50% от этого стандартного размера. Получилось мелко и нечитаемо.

Em — относительный размер шрифта

Если неохота считать проценты или нужно, чтобы шрифт точно был в 2 раза больше или в 0,7 раз меньше обычного шрифта, используют em. Это то же самое, что проценты: font-size: 100% — это как font-size:1em .

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="utf-8">
	<title>Размеры шрифтов</title>

	<style type="text/css">
		/*задаём общие параметры для всей страницы*/
		body {
		  text-align: center;
		  margin: 10;
		  font-family: Verdana, Arial, sans-serif;
		  font-size: 20px;
		}
	</style>

</head>
<body>
	<!-- текст с основным размером шрифта -->
	<p>Привет, это журнал «Код»!</p>
	<!-- эта строка будет иметь шрифт в 2 раза больше -->
	<p style="font-size: 2em;">А это — статья про размеры шрифтов</p>
	<!-- а эта — в 0,7 раза меньше, чем основной шрифт-->
	<p style="font-size: 0.7em;">И здесь всё постоянно меняется</p>

</body>
</html>

Так же, как и с процентами, em — это относительные значения. Всё зависит от родительского элемента. В этом примере родительским элементом был общий размер для всей страницы, заданный в body{}. Но что, если мы вложим с помощью блоков абзацы друг в друга?

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="utf-8">
	<title>Размеры шрифтов</title>

	<style type="text/css">
		/*задаём общие параметры для всей страницы*/
		body {
		  text-align: center;
		  margin: 10;
		  font-family: Verdana, Arial, sans-serif;
		  font-size: 20px;
		}
	</style>

</head>
<body>
	<div>
		<!-- текст с основным размером шрифта -->
		<p>Привет, это журнал «Код»!</p>
		<!-- меняем размер текста относительно предыдущего блока -->
		<div style="font-size: 2em;">
			<!-- эта строка будет иметь шрифт в 2 раза больше предыдущего блока -->
			<p>Делаем шрифт побольше предыдущего</p>
			<!-- снова меняем размер текста, но уже относительно предыдущего блока -->
			<div  style="font-size: 0.7em;">
				<!-- эта строка будет в 0,7 раза меньше, чем в предыдущем блоке-->
				<p>А этот — поменьше своего предыдущего</p>
			</div>
		</div>
	</div>
</body>
</html>

Размеры в эмах удобно использовать для вёрстки разных иерархических элементов, где каждый вложенный уровень должен по размеру быть меньше предыдущего. Чтобы каждый раз не считать размеры вручную, можно использовать одно и то же значение в em — а браузер сам уменьшит шрифт пропорционально вложенности.

👉 Em считается относительно текущего размера шрифта и пересчитывается при изменении размеров родительского шрифта. Это можно использовать для адаптивной вёрстки.

Кроме em есть ещё rem — она считает размеры шрифта только относительно тех, которые заданы в блоке стилей html{}. Если этого блока нет или в нём ничего не написано — rem посчитает размер шрифта от стандартного значения в браузере. Отличие от em в том, что даже при вложенности друг в друга все значения будут считаться не относительно предыдущего блока, а относительно значения в html{}.

Межстрочный интервал

Помимо размера самих букв у текста есть параметр межстрочного интервала — это расстояние между нижними краями текста на каждой строке.

Стандартное значение межстрочного интервала — normal. Это значит, что браузер спросит у шрифта, какое межстрочное расстояние тот предпочитает. Вам ни о чём думать не нужно:

p {font-size: 1em; line-height: normal}

Интересно, что вся строка выше в целом бессмысленна, потому что она говорит браузеру «у текста абзацев должен быть стандартный размер и стандартный межстрочный интервал». На что браузер справедливо скажет: «Да я и так бы их сделал стандартными, не учи меня жить». 

Иногда мы используем нестандартные шрифты, в которых браузер не знает стандартного межстрочного интервала. Или он его знает, но нас этот интервал не устраивает. Тогда интервал можно задать во всех тех же единицах: пикселях, емах, процентах. 

p {line-height: 22px;}

p {line-height: 1.3em;}

p {line-height: 130%;}

Как адаптировать размер текста под размер экрана

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

Самый прямолинейный способ это сделать — задать размер в единицах vw. Например, 1vw — это 1% ширины экрана; 10vw — 10% ширины экрана. Если экран шириной 1000 пикселей, то 20vw — это 200 пикселей.

Звучит неплохо, но может плохо выглядеть: смартфоны обычно очень узкие, а экраны компьютеров очень широкие, и разница в размере шрифта будет в 5–6 раз. И если, например, основной текст фиксированного размера, а заголовки должны менять размер, то на широких экранах заголовки будут мельче, чем основной текст.

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="utf-8">
	<title>Размеры шрифтов</title>

	<style type="text/css">
		/*задаём общие параметры для всей страницы*/
		body {
		  text-align: center;
		  margin: 10;
		  font-family: Verdana, Arial, sans-serif;
		}
		h2 {
		  /*заголовок будет фиксированного размера*/
		  font-size: 40px;
		}
		p {
		  /*а размер текста будет зависеть от ширины экрана*/
		  font-size: 5vw;
		}
	</style>

</head>`
<body>
	<div>
		<!-- заголовок, размер которого зависит от размера экрана -->
		<h2>Привет, это журнал «Код»!</h2>
		
		<!-- основной текст, который не зависит от размера экрана -->
		<p>Этот текст зависит от ширины экрана. Чем больше ширина — тем больше размер этого текста</p>
</body>
</html>

Второй вариант — использовать медиазапросы. Мы расскажем о них подробно в другой статье, а пока кратко: это когда мы можем накатывать разные стили на документ в зависимости от того, как этот документ отображается. Можно сказать: «Если экран шире 500 пикселей, используй вот такой размер шрифта; если шире 1000 пикселей — сякой; а если это не веб-страница, а версия для печати — вообще используй другой шрифт и размер».

Тогда мы можем просто задать размеры стандартных экранов смартфонов и прописать нужные размеры текста для каждого, и всё будет выглядеть идеально.

@media screen and (min-width: 601px) { h2 {font-size: 110px;}}

@media screen and (max-width: 600px) { h2 {font-size: 40px;}}