Let's recall our school days… Almost every child in the world has asked the question, “Why do we need to attend math, algebra, and geometry classes? We already know 2+2, and now we have to deal with exams, derivatives, sines, and cosines…” Some kids desperately get bored in such classes, while others, on the contrary, enjoy solving problems and equations. But as kids grow up, they begin to understand that some mathematical basics really do have practical applications in daily life, in university, and later at work. We’re not talking about engineering in the grand sense, but about everyday life. A basic example—the “golden ratio,” which is used in drawing and architecture, and at the very least, in web design.

A question some people face now is: “Do you need to be an A or B student in math to become a good web developer, since you often have to deal with numbers and calculations?” And you know, if you think that a “good mathematician” is someone who understands pure mathematical concepts like analysis or multivariable calculus involving complex theorems and proofs that take up an entire wall (not just a notebook spread), we must admit—those skills aren’t needed for web design or development. You can relax. However, some practical skills from school or university might still come in handy in HTML/CSS layout and design.

Let’s dive deeper into the topic. For example, using border width to create triangles implies knowing how the browser renders borders in general, plus some basic trigonometry to understand how style resets and shape changes work—and how to alter that rendering to create different shapes. In reality, it’s not that difficult—most people just don’t stop to think about what underlies modern capabilities.

But let’s take a look at some areas of web development where math can come in handy.

Geometry

Drawing shapes with CSS

Geometry helps understand how to create shapes in CSS. Take the border-radius property, which rounds the corners of an element’s outer border. Typically, developers set a value and move on. It’s simple, convenient, and fast—no argument there. But let’s look closer at this property.

The border-radius property actually combines four values—one for each corner: top-left, top-right, and so on. Logically, it turns a square (pixel) into a circle. What’s interesting is that each corner can have two values: a horizontal and a vertical radius. As you can see in the image, the top radius is smaller, so the curve isn’t uniform—the shape looks a bit “wonky.” To fix it, just use 50% or exact px values, and keep building your layout. This is fundamental CSS, though often forgotten.

Triangles are created in a pretty interesting way. When you create borders around a square, they connect diagonally. If the main element has 0 width/height, you get a meeting point of four triangles. Since you rarely need all four, the rest are made transparent. We showed some examples at the start of this piece. When the center has 0 size, you get clean triangles.

Again, nothing magical—it’s just basic school geometry used to calculate circles and angles. And if you study CSS more closely—not just as a tool for layout—you’ll find other fun patterns.

The Pythagorean Theorem in CSS

It’s a thing! Again, we’re talking triangles—not drawing them, but calculating them. If you need an irregular triangle, the Pythagorean theorem helps calculate the necessary height. See the example below.

So we’re applying school-learned concepts to web layout and design. And if you observe how CSS is built on different sites, it becomes even more fascinating. We previously talked about the benefits of using templates and themes.

A simple example: a designer draws a triangle pointing down, looking like it’s hanging on a line. They design it in Photoshop, but loading too many images on a site isn’t ideal. So the developer starts thinking how to recreate it without using an image. And this is where the method of “hiding” unnecessary parts comes into play.

Here are more fun shape-drawing CSS examples—not basic ones, but slightly more complex: Multiple circles, complex flower, petals (as detail), arrows

Arithmetic

It may seem insignificant, but if you’re building a responsive design—which is essential nowadays—arithmetic is crucial. What can it do if you don’t even need to calculate anything—there are calculators, right? Let’s look at CSS units and values—they’re what you’re often calculating. It might all seem basic, like in geometry, but complex beauty and code rest on basics.

Numbers in CSS3 are special and defined in the CSS Values and Units Module Level 3. The key function here is calc(), which supports four operations: add, subtract, multiply, and divide.

In the days of fixed-width design, devs created pixel-perfect layouts for specific screen types. It was easy. But with screen sizes growing exponentially, fixed-width layouts became outdated.

It made more sense to let the browser size elements based on screen size—widths in percentages, font sizes in em or ch, and now we have multiple viewport units. The calc function “mixes” unit types, performing tricky calculations so developers can focus on designing layouts and components that look great. Sounds magical, like some super-duper-thing, but it’s actually simple. Example: aligning with calc.

Let’s look at more examples and use cases.

Floating Footer

A common web requirement is to keep the footer visible at the bottom of the window, even on long pages. There are various ways to do this today, but many developers consider using calc a cleaner approach. This way, the footer stays in view even if it has little content. A prime example is the Blizzard site—it has both a floating menu and footer.

Here’s a simple layout with header, main, and footer.

To keep the footer at the bottom regardless of main content height, the main should have a min-height of 100% viewport height minus the combined height of header and footer. The formula:

100% viewport height – (height of header + height of footer)

In CSS, assuming resets are done, it looks like this:

Without extra styles, header/footer height is determined by inner text. Also, using min-height instead of height ensures that extra content still displays normally.

Fluid Typography

A common responsive design trick is changing font size based on browser width. Here’s an example on Codepen (resize the window and watch it work).

Math helps determine font size across various viewport widths. This makes font size more complex than just using px or em units. One problem is that if the viewport gets too small, text can become unreadable.

In the same example, the text shrinks, but the layout is still readable.

To deal with shrinking fonts, calc can help set minimum sizes.

It’s simple but lacks control. To regulate font size (which you often need), add more variables to the equation. The “fluid typography” idea was introduced by Mike Riethmuller in his article, following Tim Brown’s concept. The equation:

Florens Verschelde later explored the topic deeper in his article on math in CSS, expressing font size calculation as a linear function. These graph-based functions help visualize and understand how font size relates to viewport size.

Conclusion

Back in school, few could imagine that knowledge from math class would be useful in web development and layout. And few teachers suggested it—especially if you studied in the ’90s or 2000s. Now, this fact might surprise some, or not at all.

But creative work is often tied to math—calculating sizes and ratios, drawing perfect or curved shapes. And let’s not forget the golden ratio we mentioned earlier.

Looking at design and layout this way definitely makes learning more interesting and draws developers in—regardless of experience. Although… if you just say, “You need math in layout and design,” there’s a 99% chance of seeing panic in someone’s eyes…