Home | Math Display Experiments | Using MathJax fonts outside of MathJax

Using KaTeX (and MathJax) fonts outside of KaTeX (and MathJax)

Page last updated: 14 Jan 2018.

Overview

Some time ago I converted all math images on IntMath to MathJax, and subsequently to KaTeX.

Rather than converting the thousands of remaining sundry math snippets (which used italics, subscripts, superscripts or a CSS class) to MathJax (which would take forever), I've styled them to look like KaTeX output so everything looks more consistent.

This page allows easy browser comparisons of styled math snippets with MathJax and KaTeX output.

The gray horizontal lines enclose the height of letters a, c, e, m, n, etc when using Arial at 1em font-size.

CSS

@font-face{font-family:KaTeX_Math; src:url('/includes/cssjs/katex/fonts/KaTeX_Math-Italic.woff2') format('woff');
    font-weight:400;
    font-style:normal}
@font-face{font-family:KaTeX_Math; src:url('/includes/cssjs/katex/fonts/KaTeX_Math-Italic.woff2') format('woff');
    font-weight:400;
    font-style:italic}	

@font-face{font-family:KaTeX_Main; src:url('/includes/cssjs/katex/fonts/KaTeX_Main-Regular.woff2') format('woff');
    font-weight:400;
    font-style:normal}
@font-face{font-family:KaTeX_Main; src:url('/includes/cssjs/katex/fonts/KaTeX_Main-Italic.woff2') format('woff');
    font-weight:400;
    font-style:italic}
sup,sub,.intmath{font-family:KaTeX_Main,"Times New Roman",Times,serif}
i,em{font-family:KaTeX_Math,"Times New Roman",Times,serif;font-style:normal}
.intmath{white-space:nowrap}
.intmathItalic{font-family:KaTeX_Math,"Times New Roman",Times,serif;font-style:normal}
sup, sub{font-size:0.8em}
.intmath, .intmathItalic{font-size:1.15em}
.intmath sup, .intmath sub, .intmathItalic sup, .intmathItalic sub{font-size:0.7em}
i, em{font-size:1.15em}
.intmath i, .intmath em{font-size:1em}
#content sup, #wrapper sup{margin-left:1px}


Comparison Table

Processed by KaTex Process with MathJax

HTML tags using class "intmath"
(with KaTeX fonts)
Processed by KaTeX

Baseline a2 sin(θ) + b2 = c2

Baseline `a^(2sin(theta))+b^2=c^2`

Baseline x2 + y3 = sin θ

Baseline `x^2+y^3=sin theta`

Baseline x = 0 to x = π

Baseline `x=0` to `x=pi`

Baseline (1 − cos2 α) = sin2 α

Baseline `(1-cos^2 alpha)` `=sin^2 alpha`

Baseline sin2 θ + cos2 θ = 1

Baseline `sin^2 theta + cos^2 theta=1`

Baseline As x → −∞, dy/dx → 1

Baseline As `x-> -oo`, `dy//dx -> 1`

Baseline dy = 1 dy

Baseline `int dy = int1 dy`

Baseline f(x) = (5x + 7θ)b = 7

Baseline `f(x)` `=(5^x+7^theta)^b=7`

Baseline f(x) = x2, so f(3)=6

Baseline `f(x)=x^2`, so `f'(3)=6`

Baseline θ = 15

Baseline `theta=15^@`

Baseline y = x1/2

Baseline `y=x^(1//2)`

Baseline P(t) = pQ

Baseline `P(t)=pQ`

(uses <p class="intmath"> ...</span>

a1/n × a1/n ... × a1/n = a

Baseline `a^(1//n)xxa^(1//n)...` `xxa^(1//n) = a`

Baseline (x1, y1) and (x2, y2)

Baseline `(x_1,y_1)` and `(x_2,y_2)`

(This one uses "intmathItalic" class. There is no need to add <i>, <em> tags for math symbols.)
Baseline F(θ + q0) = 5αζx2

Baseline `F(θ + q_0) = 5αζx^2`

(This one uses <i> and <em> only - not "intmath" class)
Baseline The x- and y-intercepts ...

Baseline The `x`- and `y`-intercepts ...

(This uses <i>, <em>, <sub> and <sup> - not "intmath" class)
Baseline Find x1 + y5 = √(σ)

Baseline Find `x_1+y^5=sqrt(sigma)`

Capitals and numbers

The first one in each group is a capital letter using default font (Arial), the second is italic, and the third is KaTeX:

A A `A` B B `B` C C `C` D D `D` K K `K` P P `P` Q Q `Q` R R `R` X X `X` Y Y `Y` Z Z `Z`

The first number in each group uses default font, and the second is KaTeX:

0 `0` 1 `1` 5 `5` 7 `7` 8 `8` 9 `9`

Font sizes and readability

Occasionally, odd things happen at different pixel sizes. The following table shows how the math looks for a range of font sizes.

Some observations:

Currently: KaTeX fonts, KaTeX rendering

NOTE

Page font
em
Page font
px
KaTeX font
1.15em
KaTeX font
px
HTML (<em>, <sup>, etc)KaTeX
0.87500 14.0 1.00625 16.100 x2 + 2 = 6 ÷ 3 − 2 ≤ 0 `(d(vec x))/dt = (2pi)/2.00`
0.88125 14.1 1.01344 16.215 x2 + 2 = 6 ÷ 3 − 2 ≤ 0 `(d(vec x))/dt = (2pi)/2.00`
0.88750 14.2 1.02063 16.330 x2 + 2 = 6 ÷ 3 − 2 ≤ 0 `(d(vec x))/dt = (2pi)/2.00`
0.89375 14.3 1.02781 16.445 x2 + 2 = 6 ÷ 3 − 2 ≤ 0 `(d(vec x))/dt = (2pi)/2.00`
0.90000 14.4 1.03500 16.560 x2 + 2 = 6 ÷ 3 − 2 ≤ 0 `(d(vec x))/dt = (2pi)/2.00`
0.90625 14.5 1.04219 16.675 x2 + 2 = 6 ÷ 3 − 2 ≤ 0 `(d(vec x))/dt = (2pi)/2.00`
0.91250 14.6 1.04938 16.790 x2 + 2 = 6 ÷ 3 − 2 ≤ 0 `(d(vec x))/dt = (2pi)/2.00`
0.91875 14.7 1.05656 16.905 x2 + 2 = 6 ÷ 3 − 2 ≤ 0 `(d(vec x))/dt = (2pi)/2.00`
0.92500 14.8 1.06375 17.020 x2 + 2 = 6 ÷ 3 − 2 ≤ 0 `(d(vec x))/dt = (2pi)/2.00`
0.93125 14.9 1.07094 17.135 x2 + 2 = 6 ÷ 3 − 2 ≤ 0 `(d(vec x))/dt = (2pi)/2.00`
0.93750 15.0 1.07813 17.250 x2 + 2 = 6 ÷ 3 − 2 ≤ 0 `(d(vec x))/dt = (2pi)/2.00`
0.94375 15.1 1.08531 17.365 x2 + 2 = 6 ÷ 3 − 2 ≤ 0 `(d(vec x))/dt = (2pi)/2.00`
0.95000 15.2 1.09250 17.480 x2 + 2 = 6 ÷ 3 − 2 ≤ 0 `(d(vec x))/dt = (2pi)/2.00`
0.95625 15.3 1.09969 17.595 x2 + 2 = 6 ÷ 3 − 2 ≤ 0 `(d(vec x))/dt = (2pi)/2.00`
0.96250 15.4 1.10688 17.710 x2 + 2 = 6 ÷ 3 − 2 ≤ 0 `(d(vec x))/dt = (2pi)/2.00`
0.96875 15.5 1.11406 17.825 x2 + 2 = 6 ÷ 3 − 2 ≤ 0 `(d(vec x))/dt = (2pi)/2.00`
0.97500 15.6 1.12125 17.940 x2 + 2 = 6 ÷ 3 − 2 ≤ 0 `(d(vec x))/dt = (2pi)/2.00`
0.98125 15.7 1.12844 18.055 x2 + 2 = 6 ÷ 3 − 2 ≤ 0 `(d(vec x))/dt = (2pi)/2.00`
0.98750 15.8 1.13563 18.170 x2 + 2 = 6 ÷ 3 − 2 ≤ 0 `(d(vec x))/dt = (2pi)/2.00`
0.99375 15.9 1.14281 18.285 x2 + 2 = 6 ÷ 3 − 2 ≤ 0 `(d(vec x))/dt = (2pi)/2.00`
1.00000 16.0 1.15000 18.400 x2 + 2 = 6 ÷ 3 − 2 ≤ 0 `(d(vec x))/dt = (2pi)/2.00`
1.00625 16.1 1.15719 18.515 x2 + 2 = 6 ÷ 3 − 2 ≤ 0 `(d(vec x))/dt = (2pi)/2.00`
1.01250 16.2 1.16438 18.630 x2 + 2 = 6 ÷ 3 − 2 ≤ 0 `(d(vec x))/dt = (2pi)/2.00`
1.01875 16.3 1.17156 18.745 x2 + 2 = 6 ÷ 3 − 2 ≤ 0 `(d(vec x))/dt = (2pi)/2.00`
1.02500 16.4 1.17875 18.860 x2 + 2 = 6 ÷ 3 − 2 ≤ 0 `(d(vec x))/dt = (2pi)/2.00`
1.03125 16.5 1.18594 18.975 x2 + 2 = 6 ÷ 3 − 2 ≤ 0 `(d(vec x))/dt = (2pi)/2.00`
1.03750 16.6 1.19313 19.090 x2 + 2 = 6 ÷ 3 − 2 ≤ 0 `(d(vec x))/dt = (2pi)/2.00`
1.04375 16.7 1.20031 19.205 x2 + 2 = 6 ÷ 3 − 2 ≤ 0 `(d(vec x))/dt = (2pi)/2.00`
1.05000 16.8 1.20750 19.320 x2 + 2 = 6 ÷ 3 − 2 ≤ 0 `(d(vec x))/dt = (2pi)/2.00`
1.05625 16.9 1.21469 19.435 x2 + 2 = 6 ÷ 3 − 2 ≤ 0 `(d(vec x))/dt = (2pi)/2.00`
1.06250 17.0 1.22188 19.550 x2 + 2 = 6 ÷ 3 − 2 ≤ 0 `(d(vec x))/dt = (2pi)/2.00`
1.06875 17.1 1.22906 19.665 x2 + 2 = 6 ÷ 3 − 2 ≤ 0 `(d(vec x))/dt = (2pi)/2.00`
1.07500 17.2 1.23625 19.780 x2 + 2 = 6 ÷ 3 − 2 ≤ 0 `(d(vec x))/dt = (2pi)/2.00`
1.08125 17.3 1.24344 19.895 x2 + 2 = 6 ÷ 3 − 2 ≤ 0 `(d(vec x))/dt = (2pi)/2.00`
1.08750 17.4 1.25063 20.010 x2 + 2 = 6 ÷ 3 − 2 ≤ 0 `(d(vec x))/dt = (2pi)/2.00`
1.09375 17.5 1.25781 20.125 x2 + 2 = 6 ÷ 3 − 2 ≤ 0 `(d(vec x))/dt = (2pi)/2.00`
1.10000 17.6 1.26500 20.240 x2 + 2 = 6 ÷ 3 − 2 ≤ 0 `(d(vec x))/dt = (2pi)/2.00`
1.10625 17.7 1.27219 20.355 x2 + 2 = 6 ÷ 3 − 2 ≤ 0 `(d(vec x))/dt = (2pi)/2.00`
1.11250 17.8 1.27938 20.470 x2 + 2 = 6 ÷ 3 − 2 ≤ 0 `(d(vec x))/dt = (2pi)/2.00`
1.11875 17.9 1.28656 20.585 x2 + 2 = 6 ÷ 3 − 2 ≤ 0 `(d(vec x))/dt = (2pi)/2.00`
1.12500 18.0 1.29375 20.700 x2 + 2 = 6 ÷ 3 − 2 ≤ 0 `(d(vec x))/dt = (2pi)/2.00`

Simple decimal products of em

This shows simple em products with the resulting pixel sizes.

Page font
em
Page font
px
KaTeX font
1.15em
KaTeX font
px
HTML (<em>, <sup>, etc)KaTeX
0.70 11.2 0.80500 12.880 x2 + 2 = 6 ÷ 3 − 2 ≤ 0 `(d(vec x))/dt = (2pi)/2.00`
0.75 12.0 0.86250 13.800 x2 + 2 = 6 ÷ 3 − 2 ≤ 0 `(d(vec x))/dt = (2pi)/2.00`
0.80 12.8 0.92000 14.720 x2 + 2 = 6 ÷ 3 − 2 ≤ 0 `(d(vec x))/dt = (2pi)/2.00`
0.85 13.6 0.97750 15.640 x2 + 2 = 6 ÷ 3 − 2 ≤ 0 `(d(vec x))/dt = (2pi)/2.00`
0.90 14.4 1.03500 16.560 x2 + 2 = 6 ÷ 3 − 2 ≤ 0 `(d(vec x))/dt = (2pi)/2.00`
0.95 15.2 1.09250 17.480 x2 + 2 = 6 ÷ 3 − 2 ≤ 0 `(d(vec x))/dt = (2pi)/2.00`
1.00 16.0 1.15000 18.400 x2 + 2 = 6 ÷ 3 − 2 ≤ 0 `(d(vec x))/dt = (2pi)/2.00`
1.05 16.8 1.20750 19.320 x2 + 2 = 6 ÷ 3 − 2 ≤ 0 `(d(vec x))/dt = (2pi)/2.00`
1.10 17.6 1.26500 20.240 x2 + 2 = 6 ÷ 3 − 2 ≤ 0 `(d(vec x))/dt = (2pi)/2.00`
1.15 18.4 1.32250 21.160 x2 + 2 = 6 ÷ 3 − 2 ≤ 0 `(d(vec x))/dt = (2pi)/2.00`
1.20 19.2 1.38000 22.080 x2 + 2 = 6 ÷ 3 − 2 ≤ 0 `(d(vec x))/dt = (2pi)/2.00`

Processed by KaTex Process with MathJax