DejaVu Sans Chess Fonts

DejaVu Sans Chess Fonts

CSS Styling

To display chess moves figure notation, I decided to use the DejaVu Sans font. It provides a consistent appearance for both the regular characters used in chess notation and the chess piece symbols.

The choice was also made with the overall visual style of this site in mind. Rather than treating the chess pieces as separate symbols from a different font, DejaVu Sans keeps the complete notation visually coherent.

This allows the notation to retain the traditional appearance of figure notation while fitting naturally with the typography used throughout the site.

The first step was to download the required font files and prepare the CSS stylesheet that defines the font for use on the site.

The following stylesheet needs to be included at the top of each page:

<!-- CSS Stylesheet -->
<link rel="stylesheet" href="/assets/css/lib/dejavu-sans-400.700.min.css" media="screen">

This makes the DejaVu Sans font available to the page so that it can be used for the chess notation.

The following table lists the Unicode characters used for figure notation, together with their standard chess notation and names.

CSS styling

The chess notation is styled with three CSS classes, depending on where the notation appears on the page.

The .chess-inline class is used when chess notation appears within a normal paragraph. It uses DejaVu Sans, with a slightly reduced font size and a small amount of letter spacing.

.chess-inline {
  font-family: "DejaVu Sans", sans-serif;
  font-size: 0.95em;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

For example:

The main line is 1. e4 e5 2. ♘f3 ♞c6, leading to the Italian Game.

The white-space: nowrap property prevents the moves from being broken across lines when the notation is treated as a single sequence.

The .chess-line class is used for a complete sequence of moves displayed on its own line. It is slightly larger than inline notation and is centered on the page.

.chess-line {
  font-family: "DejaVu Sans", sans-serif;
  font-size: 1.05em;
  line-height: 1.8;
  text-align: center;
  margin: 1.5rem 0;
}

For example:

The larger line height and vertical margins provide enough space around the move sequence without making it look like a separate interface element.

The .chess-table class is used for tables containing chess moves. The class is applied to the surrounding container, allowing the table itself and its cells to be styled without affecting other tables on the site.

.chess-table table {
  margin: 1.5rem auto;
  border-collapse: collapse;
  font-family: "DejaVu Sans", sans-serif;
}

.chess-table th,
.chess-table td {
  padding: 0.35rem 0.9rem;
  text-align: center;
}

.chess-table th {
  border-bottom: 2px solid currentcolor;
}

.chess-table td {
  border-bottom: 1px solid currentcolor;
}

.chess-table td:first-child {
  opacity: 0.65;
}

For example:

The table uses horizontal rules rather than vertical borders, giving the notation a simple, book-like appearance. The move-number column is slightly subdued so that the actual moves remain the visual focus.

This keeps the CSS explanation tied directly to the three ways the notation is actually used on the site.