We design and program web typography: responsive, accessible, efficient. HTML, CSS, JavaScript. From type scale to variable fonts and design tokens.
Print typography ends with a PDF file. Web typography begins the moment it needs to be programmed: choosing units, setting the scale, implementing font loading, ensuring readability on screens from 320 to 2560 pixels, and meeting accessibility requirements. We combine twenty years of typographic experience with proficient front-end programming so that text on screen looks and works as well as on paper.
We design and code typographic scales that scale smoothly with the browser window width. We use fluid typography (CSS clamp), a modular size scale, and a consistent vertical rhythm based on baseline leading. Result: text that is readable on a phone, tablet, and 4K monitor without manually managing dozens of breakpoints.
We optimize font loading: subsetting (removing unnecessary Unicode ranges), preloading critical variants, font-display strategies, conversion to WOFF2. We implement variable fonts, which replace multiple static files with a single one, reducing the number of HTTP requests and resource size.
We program typography compliant with WCAG 2.1 AA: minimum text contrast, scaling up to 200% without loss of content, appropriate spacing between lines and paragraphs, correct heading structure for screen readers. We take into account user preferences: prefers-reduced-motion, prefers-contrast, prefers-color-scheme.
We activate advanced font features: ligatures, small caps, tabular and old-style figures, stylistic sets, automatic fractions. We use font-feature-settings and font-variant in CSS, configure variable font axes (wght, wdth, opsz), and document the applied settings for the development team.
Typography programming is translating design decisions into code that works in the browser. It involves choosing units (rem, em, vw, vi), defining the font size scale, setting leading and spacing, programming font loading, activating OpenType features, and ensuring that text remains readable and well-formatted regardless of the device, screen resolution, and user settings.
Most websites treat typography as an aesthetic issue: "a nice font, matching color." Meanwhile, web typography is a technical discipline. A poorly implemented type scale means that headings on a phone are either too large or too small. A lack of a font loading strategy generates FOUT (Flash of Unstyled Text) or FOIT (Flash of Invisible Text). Skipping accessibility rules excludes users who rely on screen readers or text magnification.
/* Typographic scale: fluid type */
:root {
--step-0: clamp(1rem, 0.93rem + 0.36vw, 1.25rem);
--step-1: clamp(1.2rem, 1.1rem + 0.51vw, 1.56rem);
--step-2: clamp(1.44rem, 1.3rem + 0.72vw, 1.95rem);
--step-3: clamp(1.73rem, 1.52rem + 1.03vw, 2.44rem);
--step-4: clamp(2.07rem, 1.79rem + 1.43vw, 3.05rem);
}
body { font-size: var(--step-0); }
h3 { font-size: var(--step-2); }
h2 { font-size: var(--step-3); }
h1 { font-size: var(--step-4); }/* Variable font: one family, many variations */
@font-face {
font-family: "Inter";
src: url("inter.woff2") format("woff2");
font-weight: 100 900;
font-display: swap;
font-style: normal;
}
body {
font-family: "Inter", system-ui, sans-serif;
font-weight: 400;
font-variation-settings:
"opsz" 16; /* optical size */
}
h1, h2 {
font-weight: 650;
font-variation-settings:
"opsz" 32;
}The traditional approach to responsive typography involves defining font sizes in media queries: from this breakpoint the text is 16px, from this one 18px, from this one 20px. Each breakpoint is a jump, and between them, the text is sometimes too small or too large. Fluid typography solves this problem: font size scales smoothly between a minimum and maximum, proportionally to the viewport width.
We program this using CSS clamp(): a single declaration instead of a series of media queries. We build the scale modularly (with a multiplier between consecutive steps, e.g., 1.25 or 1.333), so that proportions between headings, body text, captions, and notes are consistent across every screen width. We base the vertical rhythm on multiples of the baseline leading, ensuring optical regularity even in complex layouts combining text, images, quotes, and tables.
Web fonts are often the largest resource blocking the initial rendering of a page. Four font variations (regular, italic, bold, bold italic) at 50–80 kB each amount to 200–320 kB to download before the user sees the text. We optimize this process on several levels. Subsetting: we remove Unicode ranges from the font file that the site doesn't use (e.g., Cyrillic, Greek, mathematical symbols), reducing the file size by up to 60–70%. WOFF2 format: the best available compression for web fonts. Preload: we inform the browser in advance which font files will be needed.
Variable fonts are the next step: instead of four files, we download one that contains a continuous range of weight, width, and slant. A variable font file can be larger than a single static variation, but smaller than three or four variations combined. For projects requiring many weights (e.g., a design system with 300, 400, 500, 600, 700), the savings are substantial.
/* WCAG 2.1: spacing and scaling */
body {
font-size: 100%; /* do not block zoom */
line-height: 1.6;
letter-spacing: 0.01em;
word-spacing: 0.05em;
}
p { margin-bottom: 1.5em; }
/* Respect user preferences */
@media (prefers-contrast: more) {
body {
font-weight: 450;
letter-spacing: 0.02em;
}
}
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; }
}/* OpenType features in CSS */
.body-text {
font-variant-ligatures: common-ligatures;
font-variant-numeric: oldstyle-nums
proportional-nums;
hanging-punctuation: first last;
}
.data-table td {
font-variant-numeric: tabular-nums
lining-nums;
}
.acronym {
font-variant-caps: all-small-caps;
letter-spacing: 0.05em;
}
.fraction {
font-variant-numeric: diagonal-fractions;
}We review the existing code, style sheets, and font loading methods. We identify problems: inconsistent scale, lack of a font-display strategy, too many variations, accessibility gaps. If the project is starting from scratch, we establish requirements based on mockups and the design system.
We define the size scale, leading, spacing, heading hierarchy, and text variants (lead, body, caption, code, data). We save this as design tokens (custom CSS properties), ready to be used in code and synchronized with design tools (Figma).
We program the style sheets: fluid type, font loading, OpenType features, accessibility rules. We test on real devices and in different browsers. We verify performance (Lighthouse, WebPageTest) and accessibility (axe, WAVE).
We deliver the code along with documentation: a description of the typographic system, instructions for using tokens, and guidelines for future development. We conduct training for the development team if necessary.
In large projects, typography must be defined as a system: a set of tokens (variables) that describe every parameter of the text and are shared between code and design tools. Font sizes, leading, weights, text colors, spacing, and allowed font combinations. We design these systems and save them as CSS custom properties, JSON tokens (for Figma Tokens, Style Dictionary), or SCSS/Less variables, depending on the client's technology stack.
A consistent typographic system eliminates arbitrariness: the developer does not choose a size "by eye", but reaches for the token --step-2 or --text-lg, which has defined values for every screen width. The designer works with the same values in Figma. The result: no discrepancies between design and implementation, faster deployments of new views, and easier maintenance of consistency as the product grows.
We design publication layouts for a wide range of editorial formats, primarily for trade and industry magazines. Our portfolio includes over twenty published titles, each prepared with meticulous attention to the specifics of its subject matter.
We create beautifully typeset books that are a pleasure to read. We specialize in the design and layout of complex academic, legal, and industry publications containing tables, charts, diagrams, and mathematical formulas.
Professional typesetting of books, magazines, catalogues, and reports in Adobe InDesign. Text layout, table and chart formatting, technical editing, and prepress file preparation. We specialize in publications with complex typographic structures.
Our team includes experienced editors and meticulous proofreaders — the most attentive readers a text can have. Their linguistic sensitivity and exceptional thoroughness ensure every publication receives the highest standard of editorial care.
We create engaging reports that influence business decisions: from concise one-pagers to comprehensive analyses. We select the appropriate format for the specific content and audience needs. We combine solid research methodology with clear visual presentation.
We typeset doctoral dissertations, habilitation monographs, and academic books for publication. We perform technical editing: from unifying structure and footnotes to typesetting tables, charts, and mathematical formulas, in accordance with publisher and university requirements.
We know which questions to ask to arrive at distinctive and functional typographic solutions — for large corporations and small businesses alike, wherever the right typeface choice makes a measurable difference.
Using tools for content analysis, complex text pattern matching, and conditional transformation of styles and formats, we build systems that streamline the publication layout process and reduce both effort and turnaround time.
We provide Adobe Creative Cloud training for companies and institutions, combined with typography and design principles. We also conduct UX audits and expert usability analyses of online products and printed publications.
It is translating the rules of typography into code: HTML, CSS, and JavaScript. It covers type scales, leading, vertical rhythm, responsiveness, font loading, accessibility, and OpenType features. The goal is to make text on screen as carefully designed as in print.
Fluid typography is a technique where font size scales smoothly between a minimum and maximum value, proportionally to the browser window width. In CSS, this is achieved using the clamp() function. It eliminates abrupt text size changes between breakpoints.
Yes, significantly. Web fonts are often the largest render-blocking resource. We optimize loading: subsetting, preload, font-display: swap/optional, variable fonts instead of multiple static files. Properly implemented typography speeds up First Contentful Paint.
Yes. We program typography compliant with WCAG 2.1 AA: minimum text contrast, ability to scale up to 200% without loss of content, appropriate spacing, correct heading structure. We take into account user preferences: prefers-reduced-motion, prefers-contrast, prefers-color-scheme.
A variable font is a single font file containing a continuous range of variations: weight (wght), width (wdth), slant (slnt), and optionally optical size (opsz). Instead of loading separate files for regular, bold, and italic, the browser downloads one file and interpolates the needed variations.
The cost depends on the scope: implementing just a type scale and fonts is a smaller project than a comprehensive typographic system with design tokens, documentation, and an accessibility audit. After discussing your needs, we prepare a free quote.
kontakt@typograficznie.pl +48 608 271 665
Marcin Szewczyk-Wilgan → ¶
Wrocław, Poland
Tax ID (NIP): PL6391758393
