Свойство font-size

Содержание

Аппликатуры аккорда Em-6

На схеме струны расположены сверху вниз с шестой по первую. Римские цифры над схемой — номера ладов. Арабские цифры в кружках на струнах — указание пальцев:

  1. указательный
  2. средний
  3. безымянный
  4. мизинец

Аппликатура аккорда Em-6 на 1 ладу


I II III IV V E (Ми) B (Си) E (Ми) G (Соль) C (До) E (Ми) указательный безымянный средний

Как зажать аккорд Em-6 на 1 ладу:

  • Струны 1, 3 и 6 остаются открытыми.
  • Струна 2 зажимается указательным пальцем на 1-ом ладу.
  • Струна 4 зажимается безымянным пальцем на 2-ом ладу.
  • Струна 5 зажимается средним пальцем на 2-ом ладу.

Аппликатура аккорда Em-6 на 5 ладу

V VI VII VIII IX X (Струна не играется) E (Ми) G (Соль) C (До) E (Ми) B (Си) мизинец указательный указательный указательный безымянный

Как зажать аккорд Em-6 на 5 ладу:

  • Струна 1 зажимается мизинцем на 7-ом ладу.
  • Струны 2, 3 и 4 зажимаются указательным пальцем на 5-ом ладу приемом баррэ.
  • Струна 5 зажимается безымянным пальцем на 7-ом ладу.
  • Струна 6 не должна звучать, поэтому при игре боем должна быть приглушена.

Аппликатура аккорда Em-6 на 7 ладу

VII VIII IX X XI B (Си) X (Струна не играется) X (Струна не играется) E (Ми) G (Соль) C (До) безымянный средний мизинец указательный

Как зажать аккорд Em-6 на 7 ладу:

  • Струна 1 зажимается безымянным пальцем на 8-ом ладу.
  • Струна 2 зажимается средним пальцем на 8-ом ладу.
  • Струна 3 зажимается мизинцем на 9-ом ладу.
  • Струны 4 и 5 не должны звучать, поэтому при игре боем должны быть приглушены.
  • Струна 6 зажимается указательным пальцем на 7-ом ладу.

Аппликатура аккорда Em-6 на 9 ладу

IX X XI XII XIII X (Струна не играется) G (Соль) C (До) E (Ми) B (Си) X (Струна не играется) мизинец указательный безымянный средний

Как зажать аккорд Em-6 на 9 ладу:

  • Струны 1 и 6 не должны звучать, поэтому при игре боем должны быть приглушены.
  • Струна 2 зажимается мизинцем на 12-ом ладу.
  • Струна 3 зажимается указательным пальцем на 9-ом ладу.
  • Струна 4 зажимается безымянным пальцем на 10-ом ладу.
  • Струна 5 зажимается средним пальцем на 10-ом ладу.

Аппликатура аккорда Em-6 на 12 ладу

XII XIII XIV XV XVI E (Ми) B (Си) E (Ми) G (Соль) C (До) E (Ми) указательный средний указательный мизинец безымянный указательный

Как зажать аккорд Em-6 на 12 ладу:

  • Струны 1, 3 и 6 зажимаются указательным пальцем на 12-ом ладу приемом баррэ.
  • Струна 2 зажимается средним пальцем на 13-ом ладу.
  • Струна 4 зажимается мизинцем на 14-ом ладу.
  • Струна 5 зажимается безымянным пальцем на 14-ом ладу.

Use em or px for font sizes

CSS inherited the units (point) and (pica) from typography. Printers have traditionally used those and similar units in preference to or . In CSS there is no reason to use , use whichever unit you prefer. But there is a good reason to use neither nor any other absolute unit and only use and .

Here are a few lines of different thickness. Some or all of them may look sharp, but at least the 1px and 2px lines should be sharp and visible:

0.5pt, 1px, 1pt, 1.5px, 2px

If the first four lines all look the same (or if the 0.5pt line is missing), you are probably looking at a computer monitor that cannot display dots smaller than 1px. If the lines appear to increase in thickness, you are probably looking at this page on a high-quality computer screen or on paper. And if 1pt looks thicker than 1.5px, you probably have a handheld screen.

The magic unit of CSS, the , is a often a good unit to use, especially if the style requires alignment of text to images, or simply because anything that is 1px wide or a multiple of 1px is guaranteed to look sharp.

But for font sizes it is even better to use . The idea is (1) to not set the font size of the BODY element (in HTML), but use the default size of the device, because that is a size that the reader can comfortably read; and (2) express font sizes of other elements in : to make the H1 2½ times as big as the normal, body font.

The only place where you could use (or or ) for setting a font size is in style sheets for print, if you need to be sure the printed font is exactly a certain size. But even there using the default font size is usually better.

“rem” Should Be Automatic for the People

This is a good time to bring up CSS3’s new addition: the rem unit. The rem unit (or “root em” unit) has pretty good browser support: IE9+, FF3.6+, Chrome, Safari 5+, and Opera 11.6+.

From what I can see, the rem unit is pretty straightforward. It lets you base your em units on a ‘root’ unit defined on the element. This way, you could go nuts with font-size settings in all sorts of places in your stylesheet, and any sizes defined with ‘rem’ would be relative to the root unit, and would not inherit from the parent as is the case with ’em’ (which you could still use, allowing you to create different root unit contexts while still being able to reference the root unit).

And as is the case with em, if you don’t define a value on the element, then the root em unit will be the default 16px.

Carpe di-em

Sick of the puns yet? Well, too bad. 🙂

Having worked in the web design and development field for about 12 years now, it’s taken me a while to break free from fixed-width, pixel-based designs. Although I’ve started doing responsive layouts, I’m still hooked on pixel units. While this might be fine for layout elements, I think for typography, the em unit should be the go-to unit.

While it is possible to do an entire layout with just em units, I think for responsive layouts it’s probably best to use pixels or percentages — and, as mentioned, use ems for typography.

So if you’re like me, let’s seize the day — and start using the super intuitive ems and rems wherever it’s practical and sensible.

Font Sizing with Rem Units

One of the pioneers of using rem units for font sizing is Jonathan Snook with his Font sizing with REM article, back in May, 2011. Like many other CSS developers, he had to face the problems that em units bring in complex layouts.

At that time, older versions of IE still had large market shares and they were unable to zoom text that was sized with pixels. However, as we saw earlier, it is very easy to lose track of nesting and get unexpected results with em units.

The main issue with using rem for font sizing is that the values are somewhat difficult to use. Let’s see an example of some common font sizes expressed in rem units, assuming, of course, that the base size is 16px:

  • 10px = 0.625rem
  • 12px = 0.75rem
  • 14px = 0.875rem
  • 16px = 1rem (base)
  • 18px = 1.125rem
  • 20px = 1.25rem
  • 24px = 1.5rem
  • 30px = 1.875rem
  • 32px = 2rem

As we can see, these values are not very convenient for making calculations. For this reason, Snook used a trick called “62.5%“. It was not a new discovery, by any means, as it was already used with em units:


As rem units are relative to the root element, Snook’s variant of the solution becomes:

One also had to take into account the other browsers that didn’t support rem. Thus the code from above would have actually been written this way:

While this solution seems to be close to the status of a “golden rule”, there are people who advise against using it blindingly. Harry Roberts writes his own take on the use of rem units. In his opinion, while the 62.5% solution makes calculation easier (as the font sizes in are 10 times their rem values), it ends up forcing developers to explicitly rewrite all the font sizes in their website.

A third view comes from Chris Coyier of CSS-Tricks. His solution makes use of all three units we encountered so far. He keeps the root size defined in , modules defined with rem units, and elements inside modules sized with em. This approach makes easier to manipulate global size, which scales the type in the modules, while the module content is scaled based on the module font size itself. Louis Lazaris discussed that latter concept in The Power of em Units in CSS.

In the example below you can see how Chris’s approach would look:

See the Pen One Method for Using ems and rems in CSS by SitePoint (@SitePoint) on CodePen.

In practice, there are major frameworks such as Bootstrap 4 and the guidelines that use rem units for sizing text content.

A special mention goes to , a very popular collection of React components. Not only are they sizing text the same way, but also offer a mechanism to implement the “10px simplification” we mentioned above.

Another recent project, Every Layout, combines em and rem units in a very inspired way. It comes closest to Chris Coyier’s model outline earlier and it uses em units to emphasize inline elements like SVG icons, spans or other similar elements.

As you can see, there is no “silver bullet” solution. The combinations possible are limited only by the imagination of the developers.

Component-Level Sizing

The concept of “components” is pretty popular right now. It works well with modular CSS techniques as well as with the idea of encapsulated sections of code in general. And I’m guessing the following technique will be even more interesting when the Web Components spec becomes widely supported.

The technique basically works like this: The property is used, as Simurai refers to it, as a “trojan horse”, creating the base unit for the various elements inside our component, or module. Since em units, as described above, are calculated based on the root-defined on the parent element, this makes the entire component easily resizable by simply changing the on the parent element.

Let’s look at this in action in a CodePen demo:

See the Pen Using ems for resizable components by SitePoint (@SitePoint) on CodePen.

This silly little module has four basic elements in it. Nothing fancy, just an example to illustrate this technique. Move the range slider at the top of the demo page to change the size of the module. You can also test it at full screen. The range slider is hooked onto a single value on the root element for the component: The value.

It should be noted here that the purpose of making the component resizable using this single CSS property is not necessarily so that the user can do this. It’s mainly so that the developer maintaining the module can make adjustments quickly, without fiddling with the different values in all parts of the component.


As described in the previous section, as the font size changes, this trickles down to all the em values that are set on that parent element as well as to all of its child elements, making all parts of the component proportionally flexible.

If you examine the CSS, you’ll notice the following:

  • Everything inside the component is sized with ems, except the outside border (which we want to remain at 2px at all times), and the image, which I could resize if we wanted it to, but I’m happy with its size being static for this case.
  • The teardrop-like thing in the top right corner is a pseudo-element, which likewise benefits from the base on the parent.
  • The CSS also includes two media queries that adjust the on the parent. Again, this shows the usefulness of this technique because you don’t have to change all the various sizes in the media queries, but only the .

More units in CSS

To make it even easier to write style rules that depend only on the default font size, CSS has since 2013 a new unit: the . The (for “root em”) is the font size of the root element of the document. Unlike the , which may be different for each element, the is constant throughout the document. E.g., to give P and H1 elements the same left margin, compare this pre-2013 style sheet:

p { margin-left: 1em }
h1 { font-size: 3em; margin-left: 0.333em }

with the new version:

p { margin-left: 1rem }
h1 { font-size: 3em; margin-left: 1rem }

Other new units make it possible to specify sizes relative to the reader’s window. These are the and . The is 1/100th of the window’s width and the is 1/100th of the window’s height. There is also , which stands for whichever is the smallest of and . And . (You can guess what it does.)

Относительная длина

Единицы относительной длины задают длину относительно другого свойства длины. Относительные единицы измерения длины лучше масштабируются между различными средствами визуализации.

Еденица Описание
em Относительно элемента font-size (2em означает в 2 раза размер текущего шрифта) Попробовать
ex Относительно x-height текущего шрифта (используется редко) Попробовать
ch Относительно ширины «0» (нуль) Попробовать
rem Относительно font-size корневого элемента Попробовать
vw Относительно 1% ширины окна просмотра* Попробовать
vh Относительно 1% высоты окна просмотра* Попробовать
vmin Относительно 1% видовых экранов* меньших размеров Попробовать
vmax Относительно 1% видовых экранов* больших размеров Попробовать
% Относительно родительского элемента. Попробовать

Совет: Еденицы em и rem практичны в создании идеально масштабируемого макета! * Просмотр = размер окна браузера. Если окно просмотра имеет ширину 50 см, 1vw = 0.5cm.

…и для сравнения: элементы и #

Хотя  и остались практически такими же, как были, в их значении всё же произошли некоторые изменения. В HTML4 они означали «акцент» и «сильный акцент». Сейчас их значение несколько видоизменилось: обозначает экспрессивно-эмоциональное выделение (т.е

нечто, произнесённое иначе), а  обозначает важность

Элемент

Термин «ударение» имеет отношение к лингвистике. Ударение изменяет эмоциональную окраску слова, что, в свою очередь, может изменить смысл предложения

Например, фраза «Быстро позови доктора!» акцентирует важность того, чтобы позвали именно доктора — возможно, в ответ на чей-то вопрос «Мне позвать сестру?» Напротив, фраза «Быстро позови доктора!» акцентирует важность немедленного вызова

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

Элемент

Добавить, в общем-то, и нечего — элемент хорошо всем нам знаком

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

vmin и vmax

В то время как и всегда относятся к высоте и ширине viewport, и относятся к минимальной и максимальной ширине или высоте viewport, в зависимотсти от того, какая из величин больше, а какая меньше. Например, если ширина окна браузера задана в 1100px, а высота в 700px, будет равен 7px, а 11px. Но, если ширина будет установлена в 800px, а высота в 1080px, то будет равен 8px, а – .

Итак, как можно воспользоваться этими значениями?

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

Если вам нужен квадратный блок, который будет покрывать весь viewport (касаться четырех сторон экрана одновремнно), используйте те же правила, но с .

Совмещая эти правила можно получить очень адаптивный и зачастую необычный способ для изменения размеров вашего viewport.

What About rems and Sass?

The in CSS always inherits its value from the base font size setting on the root element of the document, irrespective of the computed font size. In HTML, the root element is always the element. So you could use rems, but this would mean you’ll have to control all components on the page using the font size on that element. It could work on certain projects, but I think this technique works best when focusing the resizability on an isolated component, rather than the whole document.

As for using a preprocessor like Sass, I think that’s a side point. Ultimately, your compiled stylesheet will use whatever units you’re using in your Sass code, and the inheritance will work the same way.

Attributes¶

The <em> tag supports the Global Attributes and the Event Attributes.

How to style <em> tag?

Common properties to alter the visual weight/emphasis/size of text in <em> tag:

  • CSS font-style property sets the style of the font. normal | italic | oblique | initial | inherit.
  • CSS font-family property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.
  • CSS font-size property sets the size of the font.
  • CSS font-weight property defines whether the font should be bold or thick.
  • CSS text-transform property controls text case and capitalization.
  • CSS text-decoration property specifies the decoration added to text, and is a shorthand property for text-decoration-line, text-decoration-color, text-decoration-style.

Coloring text in <em> tag:

  • CSS color property describes the color of the text content and text decorations.
  • CSS background-color property sets the background color of an element.

Text layout styles for <em> tag:

  • CSS text-indent property specifies the indentation of the first line in a text block.
  • CSS text-overflow property specifies how overflowed content that is not displayed should be signalled to the user.
  • CSS white-space property specifies how white-space inside an element is handled.
  • CSS word-break property specifies where the lines should be broken.

Other properties worth looking at for <em> tag:

  • CSS text-shadow property adds shadow to text.
  • CSS text-align-last property sets the alignment of the last line of the text.
  • CSS line-height property specifies the height of a line.
  • CSS letter-spacing property defines the spaces between letters/characters in a text.
  • CSS word-spacing property sets the spacing between words.

Some Notes, Flaws, etc.

As you can see from using the range slider in the demo, this type of flexible resizing isn’t always something you’ll want to use. It can be somewhat restricting.

You may have to tweak some of the em values to get them how you like, and, as in the case of the parent border in the demo, you may not want the resize-ability to apply to all elements. You can overcome this easily by simply avoiding ems on the elements you want to leave out.


As described in the discussion on Simurai’s original article, you don’t have to use px units to set the root . You can use ems for that too, but just remember that this will be inherited in the same way from its parent, possibly coming from the document’s default value for .

Аппликатуры аккорда Emaj7-5

На схеме струны расположены сверху вниз с шестой по первую. Римские цифры над схемой — номера ладов. Арабские цифры в кружках на струнах — указание пальцев:

  1. указательный
  2. средний
  3. безымянный
  4. мизинец

Аппликатуры аккорда Emaj7-5 на 1 ладу

I II III IV V E (Ми) Bb (Си бемоль) Eb (Ми бемоль) G# (Соль диез) X (Струна не играется) X (Струна не играется) безымянный средний указательный

Как зажать аккорд Emaj7-5 на 1 ладу (вариант 1):

  • Струны 1 и 2 не должны звучать, поэтому при игре боем должны быть приглушены.
  • Струна 3 зажимается безымянным пальцем на 1-ом ладу.
  • Струна 4 зажимается средним пальцем на 1-ом ладу.
  • Струна 5 зажимается указательным пальцем на 1-ом ладу.
  • Струна 6 остается открытой.

I II III IV V E (Ми) Bb (Си бемоль) E (Ми) G# (Соль диез) Eb (Ми бемоль) X (Струна не играется) мизинец указательный средний указательный

Как зажать аккорд Emaj7-5 на 1 ладу (вариант 2):

  • Струна 1 не должна звучать, поэтому при игре боем должна быть приглушена.
  • Струна 2 зажимается мизинцем на 4-ом ладу.
  • Струны 3 и 5 зажимаются указательным пальцем на 1-ом ладу приемом баррэ.
  • Струна 4 зажимается средним пальцем на 2-ом ладу.
  • Струна 6 остается открытой.

Аппликатура аккорда Emaj7-5 на 6 ладу

VI VII VIII IX X Bb (Си бемоль) E (Ми) G# (Соль диез) Eb (Ми бемоль) X (Струна не играется) X (Струна не играется) безымянный указательный средний указательный

Как зажать аккорд Emaj7-5 на 6 ладу:

  • Струны 1 и 2 не должны звучать, поэтому при игре боем должны быть приглушены.
  • Струна 3 зажимается безымянным пальцем на 8-ом ладу.
  • Струны 4 и 6 зажимаются указательным пальцем на 6-ом ладу приемом баррэ.
  • Струна 5 зажимается средним пальцем на 7-ом ладу.

Аппликатура аккорда Emaj7-5 на 8 ладу

VIII IX X XI XII X (Струна не играется) X (Струна не играется) Bb (Си бемоль) E (Ми) G# (Соль диез) Eb (Ми бемоль) мизинец средний средний указательный

Как зажать аккорд Emaj7-5 на 8 ладу:

  • Струна 1 зажимается мизинцем на 11-ом ладу.
  • Струны 2 и 3 зажимаются средним пальцем на 9-ом ладу приемом баррэ.
  • Струна 4 зажимается указательным пальцем на 8-ом ладу.
  • Струны 5 и 6 не должны звучать, поэтому при игре боем должны быть приглушены.

Аппликатура аккорда Emaj7-5 на 11 ладу

XI XII XIII XIV XV X (Струна не играется) X (Струна не играется) E (Ми) G# (Соль диез) Bb (Си бемоль) Eb (Ми бемоль) указательный указательный безымянный мизинец

Как зажать аккорд Emaj7-5 на 11 ладу:

  • Струны 1 и 2 зажимаются указательным пальцем на 11-ом ладу приемом баррэ.
  • Струна 3 зажимается безымянным пальцем на 13-ом ладу.
  • Струна 4 зажимается мизинцем на 14-ом ладу.
  • Струны 5 и 6 не должны звучать, поэтому при игре боем должны быть приглушены.

How to style tag?

Common properties to alter the visual weight/emphasis/size of text in <em> tag:

  • CSS font-style property sets the style of the font. normal | italic | oblique | initial | inherit.
  • CSS font-family property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.
  • CSS font-size property sets the size of the font.
  • CSS font-weight property defines whether the font should be bold or thick.
  • CSS text-transform property controls text case and capitalization.
  • CSS text-decoration property specifies the decoration added to text, and is a shorthand property for text-decoration-line, text-decoration-color, text-decoration-style.

Coloring text in <em> tag:

  • CSS color property describes the color of the text content and text decorations.
  • CSS background-color property sets the background color of an element.

Text layout styles for <em> tag:

  • CSS text-indent property specifies the indentation of the first line in a text block.
  • CSS text-overflow property specifies how overflowed content that is not displayed should be signalled to the user.
  • CSS white-space property specifies how white-space inside an element is handled.
  • CSS word-break property specifies where the lines should be broken.

Other properties worth looking at for <em> tag:

Using rem Units for Scaling Documents

A third use we can find for rem units is to build scalable components. By expressing widths, margins, and padding in rem units, it becomes possible to create an interface that grows or shrinks in tune with the root font size. Let’s see how this thing works using a couple of examples.

In this first example, we change the root font size using media queries. Just like in the previous section, the purpose is to customize the reading experience for the device used. As element padding values and margins are expressed using rem, the entire component scales with the device size.

Let’s see another:

See the Pen Dynamic Sizing of Modules with Rem Units by SitePoint (@SitePoint) on CodePen.

In the second example we do the same alteration using JavaScript. This time the user has control over the size of the interface, adjusting it to fit his needs. Add a way to store these custom values (using either a database, cookies or local storage) and you have the base of a personalization system based on user preferences.

ex и ch

Единицы и , по аналогии с и , соотносятся с текущим шрифтом и размером шрифта. Но, в отличие от и , они также соотносятся  c .

или character является продвинутой единицей измерения ширины от нуля, . Наиболее интересные обсуждения того, что это может значить, можно найти в блоге Эрика Мейерса. Вкратце, если мы возьмем моноширинный шрифт, контейнер с шириной из букв, тогда, например, всегда будет содержать выражение из 40 единиц этого конкретного шрифта. Когда стандартным использованием этого правила является пример шрифта Брайля, возможности творческого подхода существенно расширяют его функционал.

обозначается как «x-высота текущего шрифта ИЛИ половина «. выбранного шрифта называется высота буквы x нижнего регистра этого шрифта. Часто эта высота оказывается срединной точки всей высоты шрифта.

X-высота; высота буквы x нижнего регистра (читайте больше про структуру веб типографики)

Для этой единицы измерения существует множество вариантов использования, большинство из них являются небольшими дополнениями к основной типографике. Например, элемент , который обозначает надстрочные символы, может быть приподнят относительно своей позиции, если ему задать position: relative и значение свойства bottom 1ex. Таким же образом вы можете опустить подстрочные буквы еще ниже. Стандартные настройки браузера использует свои правила надстрочных и подстрочных символов. Но если вам нужна более тонкая настройка, вы можете сделать ее следующим образом:

Могу ли я это использовать?

Единица существует примерно , а вот для такой поддержки вы не найдете. Для ознакомления со спецификацией по поддержке свойств, ознакомьтесь со значениями и единицами CSS в блоге Эрика Мейерса.


С этим читают