[QCMU][Serif][Mono]
---[A][Typeface]---
---[for][inline]---
[Quantum][Circuits]

Brought to you by

[QUANTUM][VILLAGE]

Victoria Kumaran and Mark Carney

What is this?

This page is a demonstration page for a mono-spaced True-Type Font (TTF) that is designed to make diagrams of quantum circuits!

This typeface is an open source font based on Computer Modern Unicode (CMU) that has been edited (heavily) to allow the construction of quantum circuit diagrams in free-flowing text. This gave rise to its name: Quantum Computer Modern Unicode, or QCMU!

Try it out:

Enter text

[H]Cl[MM] ---Xcu[MM]

[H]Cl[MM]
---Xcu[MM]

But why?

Quite simply, it's designed to fill a gap in making diagrams for quantum information. At the moment you have precisely two choices:

• Make a circuit in software/online and export as an image.
• Learn LaTeX and make your documents with circuit diagrams that way.

The first solution is very common with examples such as the Qiskit Textbook. The second solution is used almost universally by those who write academic papers and resources, and whilst we, too, use LaTeX it is not the most intuitive way to create content for someone new to the field.

Whilst there is nothing wrong with either of these solutions, they both have several limitations. For example, images do not scale very well if they get compressed or if you view them between different devices or screen sizes. Also, images universally take up much more memory/space/bandwidth that just text when it comes to sharing information - suppose you have a website full of quite lightweight images, they can quickly add up.

LaTeX is a great typesetting packge, but it has a huge learning curve that can be off-putting to those who have not used it before - and it seems like a rather large price to pay for just adding a diagram to a blog or school report.

What we released was that maybe want something more dynamic than an image but not as labour intensive as learning LaTeX might be. Our proposed answer is the font we present here - Quantum Computer Modern.

There are many benfits for making diagrams in a font - and you're looking at one right now! Becauswe fonts are so well used and understood by developers, you can now have dynamically scaling multi-platform diagrams that work natively in browsers; on mobile, desktop, or more, quantum circuits can now be displayed with ease.

If you then choose to copy a font-based diagram from a site and have the font installed locally, you can simply paste the diagram into a document in software packages like MS Word, without having to install extensions anywhere.

How to use this font:

This font works as we use 'latin ligatures' or 'liga' ligatues in the font to do substitutions for complex parts of gates. Whereas this is usually used for calligraphic purposes, we have made it so that we can use ligature lookups to be functional.

So, square brackets such as [] become [] whilst a captial 'H' is H.

When combined, we get [H], which is generated from the glyphs in the font. As such, we can keep the text inline without needing to include images or other processing to get dynamic quantum circuit images.

We can also have more complicated gates; For example, if we want to have a control gate, we can indicate if we want it to point towards the 'upper' or 'lower' gate with 'Cu' and 'Cl' respectively: CuCl. The browser will look at the text, and make substitutions using the font's internal ligature lookup table.

We have also used ligatures to give us various gates for the main rotations or inverse gates - e.g. '[2X]' will render as [2X], whilst '[SR]' (the reciprocal of the S gate) will render as [SR]. We detail all of these substitutions with examples below.

Because the font is mono-spaced, adding lines should subsequently line up control nodes and lines with their target gates. Take the following example:

This is generated by the following text:

NB - when we say that it is monospaced, there are three symbols that are 'half width' - they are 'space', '*' and 'apostrophe', which in say '[ U* Z']' will render as [ U* Z']. The reason for this slight difference in spacing is purely aesthetic; the intended idea is that you can use blank spaces to re-align circuits as needed when using star/dagger symbols in gate names. For example, adding a dagger to '[U]' would go with adding a space beforethe letter, giving '[ U']'. This would render the gate from [U] to [ U'] which has the desired operator.

The downside of this is that there are some slightly inefficient lookups using mixtures of upper and lower case - so we made a cheat-sheet for you below!

How to Get the Font:

There are three font files available - they are all the same, just different formats:

• QCMU-Serif-Mono.ttf - The TrueType version of the font, ready to be installed as a user font or included in documents, eg. in MS Word.
• QCMU-Serif-Mono.woff2- a web-optimised format for the font.
• QCMU-Serif-Mono.woff - a more legacy web-optimised font format.

When including it on the web, here our the settings we have tried out so far. This page uses the font by means of the following CSS:

@font-face {
    font-family: 'QCMU Serif Mono';
    src: url('QCMU-Serif-Mono.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    font-feature-settings: "liga" on;
}
.qcircuit {
    font-family: 'QCMU Serif Mono';
    font-weight: 500;
    font-style: normal;
}

The Full Overview:

Here is an overview/cheat table for our [QCMU][by][QUANTUM][VILLAGE] font:

Glyph	Text	Description/Notes
[H]	[H]	Hadamard
[X][Y][Z] [Xl][Yl][Zl] -Cm--Cm--Cm- [Xu][Yu][Zu]	[X][Y][Z] [Xl][Yl][Zl] -Cm--Cm--Cm- [Xu][Yu][Zu]	X or NOT gate, Y gate, Z gate, with control variants (upper, lower)
[RX][RY][RZ] [Rxl][Ryl][Rzl] -Cm--Cm--Cm- [Rxu][Ryu][Rzu]	[RX][RY][RZ] [Rxl][Ryl][Rzl] -Cm--Cm--Cm- [Rxu][Ryu][Rzu]	Rotation Gates - Rx, Ry, Rz - with Control variants (upper/lower). NB - the upper case X/Y/Z just give you the rotation, whilst the lower case x/y/z allow for upper/lower variations used with control gates.
-/n-	-/n-	'slash n' for multiple qubits
-Cl--Xcl--Cl- -Xcu--Cu--|- -------Xcu-	-Cl--Xcl--Cl- -Xcu--Cu--|- -------Xcu-	Controlled-NOT upper/lower
-Cl-[Zl]-Cl- -Cm--Cm--Cm- [Zu]-Cu--Xcu-	-Cl-[Zl]-Cl- -Cm--Cm--Cm- [Zu]-Cu--Xcu-	Multi-controlled gate, with Z-upper/Lower
[MM]--- [X][MM]	[MM]--- [X][MM]	Measurement Gate
-$l--$l- -$u--|- ----$u-	-$l--$l- -$u--|- ----$u-	SWAP gates
An Bn Cn Dn . [pi*']	An Bn Cn Dn . [pi*']	Also included are letters without lines atop/below, as well as pi. Note that spaces, apostrophes (for dagger) and asterisks have top/bottom lines!
[2tr] [2X] [2xu] [2xl] [2RX] [2MXu] [2MXl] [2Y] [2yu] [2yl] [2RY] [2MYu] [2MYl] [SR] [Sru] [Srl]	[2tr] [2X] [2xu] [2xl] [2RX] [2MXu] [2MXl] [2Y] [2yu] [2yl] [2RY] [2MYu] [2MYl] [SR] [Sru] [Srl]	Square Roots (quarter turns) of Common Gates. Mnemonics are 'R' for 'reciprocal' and 'M' for 'minus', as in, reciprocal powers.
[4tr] [4X] [4xu] [4xl] [4RX] [4MXu] [4MXl] [4Y] [4yu] [4yl] [4RY] [4MYu] [4MYl] [TR] [Tru] [Trl]	[4tr] [4X] [4xu] [4xl] [4RX] [4MXu] [4MXl] [4Y] [4yu] [4yl] [4RY] [4MYu] [4MYl] [TR] [Tru] [Trl]	4th Roots (eighth turns) of Common Gates. Mnemonics are 'R' for 'reciprocal' and 'M' for 'minus', as in, reciprocal powers.
-Cl--Cl--Cl- [Xu][Yu][Zu] [Xl][Yl][Zl] -Cu--Cu--Cu-	-Cl--Cl--Cl- [Xu][Yu][Zu] [Xl][Yl][Zl] -Cu--Cu--Cu-	Controlled half-rotations on X, Y, and Z - with upper and lower linkage variations.
[H]Cl[MM] ---Xcu[MM]	[H]Cl[MM] ---Xcu[MM]	Entanglement Circuit Example
[H]-Cl-[4RX][2xl][2xl] ----Xcu-----|--|- [H]-------Cu--|- [H]----------Cu-	[H]-Cl-[4RX][2xl][2xl] ----Xcu-----|--|- [H]-------Cu--|- [H]----------Cu-	CHSH Game Circuit Example
-Cl------- ┏┻┓ n n n┏-┓ ┫Un┣[H]┫ n┣ ┫ n┣[Z]┫Fn┣ ┗┳┛ n n n┗-┛ -Cu-------	-Cl------- ┏┻┓ n n n┏-┓ ┫Un┣[H]┫ n┣ ┫ n┣[Z]┫Fn┣ ┗┳┛ n n n┗-┛ -Cu-------	Multi-qubit boxes. Note - 'space-n' also produces a space without any bars top/bottom.