Displaying Chess Boards With The Chess Mérida Font

Displaying chess boards with the chess Mérida font

For clear representation of chess diagrams and notation on my website, I integrated the Chess Mérida font. This font, originally designed by Armando Hernandez Marroquin, is specifically tailored for chess content. I use a WOFF2 web font version which allows for features like borders with coordinates.

Understanding chess Mérida glyphs

The font uses specific characters to represent pieces on light and dark squares, ensuring proper contrast within the diagram. For example, a white king on a white square uses ‘k’, while on a black square it uses ‘K’. Similarly, black pieces use different characters (‘l’/‘L’ for the king, ‘o’/‘O’ for pawns, etc.).

Beyond the standard pieces, Chess Mérida includes glyphs for:

• Figurine notation (e.g., ¢ for King, £ for Queen)
• Empty squares ( or * for white, + for black)
• Square markers (x/X, ./:)
• Border elements (corners 1, 3, 7, 9; sides 2, 4, 5, 8)
• Coordinate markers for ranks (1-8) and files (a-h), available in single and double-line border styles.

Web implementation with CSS

To use the font, I first define it in my CSS using @font-face:

@font-face {
  font-family: Merida;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/path/to/your/merida.woff2') format('woff2');
}

/* Basic styling for the board container */
.chessboard {
  font-family: Merida, serif; /* Apply the font */
  font-size: 2.0em;         /* Control board size */
  line-height: 1.0;         /* Ensure ranks touch */
  display: inline-block;
  white-space: nowrap;      /* Prevent line breaks within ranks */
  color: #2C2C2C;            /* Default color */
}

Creating the board with HTML

The board itself is structured using nested div elements. Each rank (row) is represented by a div with the class rank, containing the string of characters corresponding to that row.

<div class="chessboard">
  <div class="rank">1222222223</div> <!-- Top border -->
  <div class="rank">4tMvWlVmT5</div> <!-- Rank 8: Black pieces -->
  <div class="rank">4OoOoOoOo5</div> <!-- Rank 7: Black pawns -->
  <div class="rank">4*+*+*+*+5</div> <!-- Rank 6: Empty squares -->
  <div class="rank">4+*+*+*+*5</div> <!-- Rank 5: Empty squares -->
  <div class="rank">4*+*+*+*+5</div> <!-- Rank 4: Empty squares -->
  <div class="rank">4+*+*+*+*5</div> <!-- Rank 3: Empty squares -->
  <div class="rank">4pPpPpPpP5</div> <!-- Rank 2: White pawns -->
  <div class="rank">4RnBqKbNr5</div> <!-- Rank 1: White pieces -->
  <div class="rank">7888888889</div> <!-- Bottom border -->
</div>

This example shows the standard starting position with single-line borders. Note the use of ‘4’ and ‘5’ for left/right borders and ‘123’/‘789’ for top/bottom corners and edges.

Styling Variations

I added simple CSS classes to allow for different color themes based on my site’s palette:

.chessboard.chessboard-primary {
  color: #0083B3; /* Example primary color */
}

.chessboard.chessboard-complementary {
  color: #FF4030; /* Example complementary color */
}

Applying these classes to the main chessboard div changes the color of the pieces and dark squares:

<div class="chessboard chessboard-primary">
  <!-- ... rank divs ... -->
</div>

Coordinate Systems

The font supports different border styles, including ones with integrated coordinates. Instead of using ‘4’ and ‘5’ for side borders, I can use characters like ‘¿’ (rank 1), ‘¡’ (rank 2), …, ‘«’ (rank 8) and ‘»’ (file a), ‘…’ (file b), …, ‘œ’ (file h) for borders with coordinates.

Example using coordinate borders (ranks 1, 2, 7, 8 and files a, h shown):

<div class="chessboard chessboard-complementary">
  <div class="rank">1222222223</div>   <!-- Top border -->
  <div class="rank">«tMvWlVmTœ</div> <!-- Rank 8 with a/h file coords -->
  <div class="rank">∆OoOoOoOoœ</div> <!-- Rank 7 with a/h file coords -->
  <!-- ... other ranks ... -->
  <div class="rank">¡pPpPpPpPœ</div> <!-- Rank 2 with a/h file coords -->
  <div class="rank">¿RnBqKbNrœ</div> <!-- Rank 1 with a/h file coords -->
  <div class="rank">7»…ÚÀÃÕŒœ9</div>   <!-- Bottom border with file coords -->
</div>

This setup provides a flexible way to display chess content directly using text and CSS.

Here are some examples:

For more insights into this topic, you can find the details here.