The first thing a DevBlog reader sees is text. Well-chosen colors and fonts make a blog readable and professional. Let’s look at the tools available for this.
Color formats
Named colors
color: black;
color: white;
color: red;
color: tomato;
color: steelblue;
Handy for quick testing, but rarely used in real projects โ too few options.
HEX (#rrggbb)
The most common format. Three pairs of digits โ red, green, blue.
color: #111827; /* near black */
color: #2563eb; /* blue (main link color) */
color: #6b7280; /* gray (secondary text) */
color: #ffffff; /* white */
background: #f9fafb; /* very light gray background */
Short form: #rgb โ #rrggbb (#fff = #ffffff).
rgb() and rgba()
color: rgb(37, 99, 235); /* same as #2563eb */
color: rgba(37, 99, 235, 0.15); /* blue at 15% opacity */
background: rgba(0, 0, 0, 0.5); /* semi-transparent black overlay */
rgba is useful for shadows, overlays, and hover highlights.
hsl() and hsla()
A more intuitive format: hue (0โ360ยฐ), saturation (%), lightness (%).
color: hsl(221, 83%, 53%); /* blue */
color: hsl(0, 0%, 10%); /* near black */
color: hsla(221, 83%, 53%, 0.2); /* transparent blue */
Useful when you need a lighter or darker shade: just change the third parameter.
CSS variables for colors
Define your palette once in :root and use it everywhere:
: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;
}
/* Usage */
.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);
}
Want to change the primary color? Change one line in :root and everything updates.
Fonts
font-family โ typeface
body {
/* Fallback list โ browser uses the first available */
font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
}
code, pre {
font-family: 'Fira Code', 'Courier New', monospace;
}
sans-serif and monospace are generic family keywords (the last-resort fallback).
font-size โ size
body {
font-size: 16px; /* base size */
}
h1 { font-size: 2rem; } /* 32px at base 16px */
h2 { font-size: 1.5rem; } /* 24px */
h3 { font-size: 1.25rem; } /* 20px */
.post-meta { font-size: 0.875rem; } /* 14px */
rem is relative to the <html> base size. Preferred over px โ it scales with the user’s browser settings.
font-weight โ 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 โ style
em { font-style: italic; }
blockquote { font-style: italic; }
.tag { font-style: normal; } /* remove italic */
line-height โ line spacing
body { line-height: 1.6; } /* 1.6 ร font-size โ comfortable for reading */
h1 { line-height: 1.2; } /* headings are tighter */
code { line-height: 1.5; }
A unitless value (without px) is preferred โ it scales proportionally with the font size.
Google Fonts
Free fonts for the DevBlog. Connected via <link> in <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 tells the browser to render text in the system font while Inter loads, preventing invisible text.
DevBlog: complete typography setup
: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;
}
๐ฌ Comments (0)
No comments yet
Be the first to share your opinion about this article!