N неща, които не знаете за типографията в CSS (и още M, които знаете)

В някои от слайдовете има примери, които бяха демонстрирани на живо по време на презентацията. Поиграйте си със CSS-а в текстовите полета, за да добиете по-пълна представа за демонстираните CSS свойства.

Кой?

Гонзо Виелицата

Милен Петрински - Гонзо

http://greatgonzo.net

@gonzomir

Терминология

Шрифт

На български език думата шрифт идва от немското „Schrift“ с 2 значения — абстрактно и конкретно:

  1. начертание, външен вид на писмените знаци;
  2. пълен комплект от печатарски клишета, който съдържа едностилно оформени буквите на дадена азбука, цифрите, препинателните знаци и др.

Анатомия

Основни български термини от анатомията на шрифта

Речник

font face
начертание
italic font
курсив
bold font
полу-чер шрифт
serif
сериф или засечка
serif font
серифен шрифт
sans-serif font
безсерифен, блоков или гротесков шрифт
drop caps
бити букви

Описание в CSS

@font-face {
    font-family: 'ubunturegular';
    src: url('ubuntu-regular-webfont.eot');
    src: url('ubuntu-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('ubuntu-regular-webfont.woff') format('woff'),
         url('ubuntu-regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

Говори се за нещо

@font-face {
    font-family: 'ubunturegular';
    src: url('ubuntu-regular-webfont.eot');
    src: url('ubuntu-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('ubuntu-regular-webfont.woff') format('woff'),
         url('ubuntu-regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
Ubuntu font family 
@font-face {
    font-family: 'Ubuntu';
    src: url('ubuntu-regular-webfont.eot');
    src: url('ubuntu-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('ubuntu-regular-webfont.woff') format('woff'),
         url('ubuntu-regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Ubuntu';
    src: url('ubuntu-regular-webfont.eot');
    src: url('ubuntu-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('ubuntu-regular-webfont.woff') format('woff'),
         url('ubuntu-regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Ubuntu';
    src: url('ubuntu-bold-webfont.eot');
    src: url('ubuntu-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('ubuntu-bold-webfont.woff') format('woff'),
         url('ubuntu-bold-webfont.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'Ubuntu';
    src: url('ubuntu-italic-webfont.eot');
    src: url('ubuntu-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('ubuntu-italic-webfont.woff') format('woff'),
         url('ubuntu-italic-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

font-weight

normal | bold
bolder | lighter
100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

font-style

normal | italic | oblique
Ubuntu font family 
@font-face {
    font-family: 'Ubuntu';
    src: url('ubuntu-condensed-webfont.eot');
    src: url('ubuntu-condensed-webfont.eot?#iefix') format('embedded-opentype'),
         url('ubuntu-condensed-webfont.woff') format('woff'),
         url('ubuntu-condensed-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-stretch: condensed;
}

font-stretch

normal
ultra-condensed | extra-condensed | condensed | semi-condensed
semi-expanded | expanded | extra-expanded | ultra-expanded

Ubuntu font family

Ubuntu Regular

Ubuntu Italic

Ubuntu Bold

Ubuntu Bold Italic

Ubuntu Light

Ubuntu Light Italic

Ubuntu Medium

Ubuntu Medium Italic

Ubuntu Condensed

Фин контрол върху символите

Малки или главни букви

text-transform: uppercase;

text-transform: lowercase;

Малки главни букви

font-variant: small-caps;

font-feature-settings: "smcp" 1;

Кучето на крайния квартал

Кучето на крайния квартал

font-variant

normal | small-caps
all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps
common-ligatures | no-common-ligatures | discretionary-ligatures | no-discretionary-ligatures | historical-ligatures | no-historical-ligatures | contextual | no-contextual | historical-forms | ordinal | slashed-zero | lining-nums | oldstyle-nums | proportional-nums | tabular-nums | etc.

font-feature-settings

normal | <font-feature-tag>

kern, liga, cmcp, c2cp, clig, dlig, lnum, onum, aalt, salt, calt, swsh, ornm, ss01 - ss20, etc.

font-feature-settings: "ornm" 1, "onum" 1, "ss02"

Lucy In The Sky With Diamonds

Малки главни букви

font-variant: small-caps;

font-feature-settings: "smcp" 1;

отделен шрифт

@font-face {
  font-family: 'PlayfairDisplay';
  src: url('PlayfairDisplay-Regular.eot?') format('eot'),
       url('PlayfairDisplay-Regular.woff') format('woff'),
       url('PlayfairDisplay-Regular.ttf')  format('truetype'),
       url('PlayfairDisplay-Regular.svg#PlayfairDisplay-Regular') format('svg');
       font-weight: normal;
       font-style: normal;
}

@font-face {
  font-family: 'PlayfairDisplay';
  src: url('PlayfairDisplaySC-Regular.eot?') format('eot'),
       url('PlayfairDisplaySC-Regular.woff') format('woff'),
       url('PlayfairDisplaySC-Regular.ttf')  format('truetype'),
       url('PlayfairDisplaySC-Regular.svg#PlayfairDisplay-Regular') format('svg');
       font-weight: normal;
       font-style: normal;
       font-variant: small-caps;
}
@font-face {
  font-family: 'PlayfairDisplay';
  src: url('PlayfairDisplay-Regular.eot?') format('eot'),
       url('PlayfairDisplay-Regular.woff') format('woff'),
       url('PlayfairDisplay-Regular.ttf')  format('truetype'),
       url('PlayfairDisplay-Regular.svg#PlayfairDisplay-Regular') format('svg');
       font-weight: normal;
       font-style: normal;
}

@font-face {
  font-family: 'PlayfairDisplaySC';
  src: url('PlayfairDisplaySC-Regular.eot?') format('eot'),
       url('PlayfairDisplaySC-Regular.woff') format('woff'),
       url('PlayfairDisplaySC-Regular.ttf')  format('truetype'),
       url('PlayfairDisplaySC-Regular.svg#PlayfairDisplay-Regular') format('svg');
       font-weight: normal;
       font-style: normal;
}

Големина и подредба на символите

font-size

<absolute-size> | <relative-size> | <length> | <percentage>

xx-small, x-small, small, medium, large, x-large, xx-large

larger | smaller

em = % / 100

rem = % / 100 от основната големина

ex = височината на x ≈ 0.5em

ch = ширината на 0

1in = 96px

1cm = 96/2.54 = 37.7953px

Големият кораб минава

Големият кораб минава

font-size-adjust

c = ( a / a' ) s
s
зададената големина
a
съотношение, зададено от font-size-adjust
a'
съотношение на самия шрифт
c
коригираната големина на шрифта

line-height

normal | <number> | <length> | <percentage>

Използвайте число без единици!

line-height: 1.5;

line-height

единицинаследена стойност
числочислото
pxстойността в пиксели
emстойността в пиксели
%стойността в пиксели

Разстояние между думите и буквите

word-spacing

letter-spacing

tab-size

Аз сам си избрах тази съдба - вечната черна овца

All You Need Is Love

@font-face {
		font-family: 'Ubuntu';
		src: url('ubuntu-regular-webfont.eot');
		src: url('ubuntu-regular-webfont.eot?#iefix') format('embedded-opentype'),
				 url('ubuntu-regular-webfont.woff') format('woff'),
				 url('ubuntu-regular-webfont.ttf') format('truetype');
		font-weight: normal;
		font-style: normal;
}

Подравняване

Подравняване

text-align

text-orientation

text-align: justify;

text-justify

word-break

overflow-wrap/word-wrap

hyphens

text-align-last

Противно на всеобщото вярване, Lorem Ipsum не е просто случаен текст. Неговите корени са в класическата Латинска литература от 45г. пр. Хр., което прави преди повече от 2000 години. Richard McClintock, професор по Латински от колежа Hampden-Sydney College във Вирджиния, изучавайки една от най-неясните латински думи "consectetur" в един от пасажите на Lorem Ipsum, и търсейки цитати на думата в класическата литература, открива точния източник. Lorem Ipsum е намерен в секции 1.10.32 и 1.10.33 от "de Finibus Bonorum et Malorum" (Крайностите на Доброто и Злото) от Цицерон, написан през 45г. пр. Хр. Тази книга е трактат по теория на етиката, много популярна през Ренесанса. Първият ред на Lorem Ipsum идва от ред, намерен в секция 1.10.32.

Декорация

text-decoration

underline

Противно на всеобщото вярване, Lorem Ipsum не е просто случаен текст. Неговите корени са в класическата Латинска литература от 45г. пр. Хр., което прави преди повече от 2000 години. Richard McClintock, професор по Латински от колежа Hampden-Sydney College във Вирджиния, изучавайки една от наинай-неясните латински думи "consectetur" в един от пасажите на Lorem Ipsum, и търсейки цитати на думата в класическата литература, уткрива точния източник. Lorem Ipsum е намерен в секции 1.10.32 и 1.10.33 от "de Finibus Bonorum et Malorum" (Крайностите на Доброто и Злото) от Цицерон, написан през 45г. пр. Хр. Тази книга е трактат по теория на етиката, много популярна през Ренесанса. Първият ред на Lorem Ipsum идва от ред, намерен в секция 1.10.32.

Слънчев бряг блус

Сенки

text-shadow

Cry For A Shadow

SVG филтри

filter

Street Fightin' Man

<filter id="comics">
  <feMorphology radius="1" operator="dilate" result="thicken01" />
  <feFlood flood-color="#fff"/>
  <feComposite operator="in" in2="thicken01" result="contour"/>
  <feMorphology radius="5" operator="dilate" result="thicken" />
  <feFlood flood-color="#ff0"/>
  <feComposite operator="in" in2="thicken"/>
  <feMerge result="text">
    <feMergeNode/>
    <feMergeNode in="contour"/>
    <feMergeNode in="SourceGraphic"/>
  </feMerge>
</filter>

Whiskey in the jar

<filter id="pattern">
  <feImage xlink:href="img/pattern.gif"
  		x="0" y="0" width="100%" height="100%"
  		preserveAspectRatio="none" />
  <feComposite operator="in" in2="SourceGraphic" />
</filter>

Псевдо-елементи

::first-letter

::first-line

Смутено й пошепнах: „Вместо Менделсон
не е ли по-добре да чуем Ролинг Стоунс?“,
но тя категорично ми отвърна: „Не“
и мило се усмихна: „Бъди добро момче“

House M. D.