Первое, что видит читатель DevBlog — текст. Правильно подобранные цвета и шрифты делают блог читабельным и профессиональным. Разберём, какие инструменты для этого есть.
Форматы цвета
Именованные цвета
color: black;
color: white;
color: red;
color: tomato;
color: steelblue;
Удобны для быстрого теста, но в реальных проектах почти не используются — слишком мало вариантов.
HEX (#rrggbb)
Самый распространённый формат. Три пары цифр — красный, зелёный, синий.
color: #111827; /* почти чёрный */
color: #2563eb; /* синий (основной цвет ссылок) */
color: #6b7280; /* серый (второстепенный текст) */
color: #ffffff; /* белый */
background: #f9fafb; /* очень светло-серый фон */
Короткая запись: #rgb → #rrggbb (#fff = #ffffff).
rgb() и rgba()
color: rgb(37, 99, 235); /* то же, что #2563eb */
color: rgba(37, 99, 235, 0.15); /* синий с прозрачностью 15% */
background: rgba(0, 0, 0, 0.5); /* полупрозрачный чёрный оверлей */
rgba полезен для теней, оверлеев, подсветки при наведении.
hsl() и hsla()
Более интуитивный формат: тон (0–360°), насыщенность (%), светлота (%).
color: hsl(221, 83%, 53%); /* синий */
color: hsl(0, 0%, 10%); /* почти чёрный */
color: hsla(221, 83%, 53%, 0.2); /* прозрачный синий */
Удобен когда нужно сделать цвет светлее/темнее: меняйте только третий параметр.
CSS-переменные для цветов
Определите палитру один раз в :root и используйте везде:
:root {
--color-primary: #2563eb;
--color-primary-light: rgba(37, 99, 235, 0.1);
--color-text: #111827;
--color-text-muted: #6b7280;
--color-border: #e5e7eb;
--color-bg: #ffffff;
--color-bg-secondary: #f9fafb;
}
/* Использование */
.post-card {
background: var(--color-bg);
border: 1px solid var(--color-border);
}
.post-title a {
color: var(--color-text);
}
.post-meta {
color: var(--color-text-muted);
}
a {
color: var(--color-primary);
}
Хотите поменять основной цвет? Меняете одну строку в :root — и всё обновляется.
Шрифты
font-family — семейство шрифта
body {
/* Список запасных вариантов — браузер берёт первый доступный */
font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
}
code, pre {
font-family: 'Fira Code', 'Courier New', monospace;
}
sans-serif и monospace — ключевые слова для категорий шрифтов (запасной вариант).
font-size — размер
body {
font-size: 16px; /* базовый размер */
}
h1 { font-size: 2rem; } /* 32px при base 16px */
h2 { font-size: 1.5rem; } /* 24px */
h3 { font-size: 1.25rem; } /* 20px */
.post-meta { font-size: 0.875rem; } /* 14px */
rem — относительно базового размера <html>. Предпочтительнее px — масштабируется вместе с настройками браузера.
font-weight — насыщенность
body { font-weight: 400; } /* normal */
h1, h2, h3 { font-weight: 700; } /* bold */
.post-meta { font-weight: 400; }
.nav-link { font-weight: 500; } /* medium */
font-style — начертание
em { font-style: italic; }
blockquote { font-style: italic; }
.tag { font-style: normal; } /* сбросить курсив */
line-height — межстрочный интервал
body { line-height: 1.6; } /* 1.6 × font-size — комфортно для чтения */
h1 { line-height: 1.2; } /* заголовки плотнее */
code { line-height: 1.5; }
Безразмерное значение (без px) — предпочтительно: оно масштабируется вместе с размером шрифта.
Google Fonts
Бесплатные шрифты для DevBlog. Подключаются через <link> в <head>:
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Fira+Code:wght@400;500&display=swap" rel="stylesheet">
</head>
body {
font-family: 'Inter', sans-serif;
}
code, pre {
font-family: 'Fira Code', monospace;
}
display=swap — браузер показывает текст системным шрифтом до загрузки Inter, без мигания.
DevBlog: полная типографика
:root {
--color-text: #111827;
--color-text-muted: #6b7280;
--color-primary: #2563eb;
--color-bg: #ffffff;
--font-sans: 'Inter', system-ui, sans-serif;
--font-mono: 'Fira Code', 'Courier New', monospace;
}
body {
font-family: var(--font-sans);
font-size: 16px;
font-weight: 400;
line-height: 1.6;
color: var(--color-text);
background: var(--color-bg);
}
h1, h2, h3 {
font-weight: 700;
line-height: 1.25;
color: var(--color-text);
}
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
.post-meta {
font-size: 0.875rem;
color: var(--color-text-muted);
}
code {
font-family: var(--font-mono);
font-size: 0.875em;
background: #f3f4f6;
padding: 2px 6px;
border-radius: 4px;
}
💬 Комментарии (0)
Комментариев пока нет
Станьте первым, кто поделится мнением об этой статье!