Skip to main content
Interactive Mathematics
Search IntMath
Close

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

Using KaTeX (and MathJax) fonts outside of KaTeX (and MathJax). Processor: KaTeX

Page last updated: 22 Sep 2019.

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/KaTeX (which would take forever), I've styled them to look like KaTeX output so everything looks more consistent.

I made this page so I can easily compare (and fix) styled math snippets with MathJax or KaTeX fonts, or full output.

The gray horizontal lines enclose the height of letters a, c, e, m, n, etc when using Arial at 1em font-size. (You can remove those lines using the button.) The word "Baseline" is there for aligning the (you guessed it) baseline.

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:

  • Using KaTeX fonts, the spacing of the dots of the divide sign is strange at smaller font sizes (it's OK with MathJax fonts)
  • Using KaTeX fonts, minus sign is too thin for some font sizes (less than 16.5px), and almost disappears (it's OK with MathJax fonts)
  • Sometimes the fraction lines disappear in KaTeX rendering at certain font sizes and certain browsers

Currently: KaTeX fonts, KaTeX rendering

NOTE

  • "1em" by default is 16px on most browsers.
  • IntMath uses 1em for main page fonts and 1.15em for the .katex and .intmath classes.
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] = |6 ÷ 3 − 2| ≥ 0 `(d(vec x))/dt = sqrt(3/(2r))`
0.88125 14.1 1.01344 16.215 [x2] = |6 ÷ 3 − 2| ≥ 0 `(d(vec x))/dt = sqrt(3/(2r))`
0.88750 14.2 1.02063 16.330 [x2] = |6 ÷ 3 − 2| ≥ 0 `(d(vec x))/dt = sqrt(3/(2r))`
0.89375 14.3 1.02781 16.445 [x2] = |6 ÷ 3 − 2| ≥ 0 `(d(vec x))/dt = sqrt(3/(2r))`
0.90000 14.4 1.03500 16.560 [x2] = |6 ÷ 3 − 2| ≥ 0 `(d(vec x))/dt = sqrt(3/(2r))`
0.90625 14.5 1.04219 16.675 [x2] = |6 ÷ 3 − 2| ≥ 0 `(d(vec x))/dt = sqrt(3/(2r))`
0.91250 14.6 1.04938 16.790 [x2] = |6 ÷ 3 − 2| ≥ 0 `(d(vec x))/dt = sqrt(3/(2r))`
0.91875 14.7 1.05656 16.905 [x2] = |6 ÷ 3 − 2| ≥ 0 `(d(vec x))/dt = sqrt(3/(2r))`
0.92500 14.8 1.06375 17.020 [x2] = |6 ÷ 3 − 2| ≥ 0 `(d(vec x))/dt = sqrt(3/(2r))`
0.93125 14.9 1.07094 17.135 [x2] = |6 ÷ 3 − 2| ≥ 0 `(d(vec x))/dt = sqrt(3/(2r))`
0.93750 15.0 1.07813 17.250 [x2] = |6 ÷ 3 − 2| ≥ 0 `(d(vec x))/dt = sqrt(3/(2r))`
0.94375 15.1 1.08531 17.365 [x2] = |6 ÷ 3 − 2| ≥ 0 `(d(vec x))/dt = sqrt(3/(2r))`
0.95000 15.2 1.09250 17.480 [x2] = |6 ÷ 3 − 2| ≥ 0 `(d(vec x))/dt = sqrt(3/(2r))`
0.95625 15.3 1.09969 17.595 [x2] = |6 ÷ 3 − 2| ≥ 0 `(d(vec x))/dt = sqrt(3/(2r))`
0.96250 15.4 1.10688 17.710 [x2] = |6 ÷ 3 − 2| ≥ 0 `(d(vec x))/dt = sqrt(3/(2r))`
0.96875 15.5 1.11406 17.825 [x2] = |6 ÷ 3 − 2| ≥ 0 `(d(vec x))/dt = sqrt(3/(2r))`
0.97500 15.6 1.12125 17.940 [x2] = |6 ÷ 3 − 2| ≥ 0 `(d(vec x))/dt = sqrt(3/(2r))`
0.98125 15.7 1.12844 18.055 [x2] = |6 ÷ 3 − 2| ≥ 0 `(d(vec x))/dt = sqrt(3/(2r))`
0.98750 15.8 1.13563 18.170 [x2] = |6 ÷ 3 − 2| ≥ 0 `(d(vec x))/dt = sqrt(3/(2r))`
0.99375 15.9 1.14281 18.285 [x2] = |6 ÷ 3 − 2| ≥ 0 `(d(vec x))/dt = sqrt(3/(2r))`
1.00000 16.0 1.15000 18.400 [x2] = |6 ÷ 3 − 2| ≥ 0 `(d(vec x))/dt = sqrt(3/(2r))`
1.00625 16.1 1.15719 18.515 [x2] = |6 ÷ 3 − 2| ≥ 0 `(d(vec x))/dt = sqrt(3/(2r))`
1.01250 16.2 1.16438 18.630 [x2] = |6 ÷ 3 − 2| ≥ 0 `(d(vec x))/dt = sqrt(3/(2r))`
1.01875 16.3 1.17156 18.745 [x2] = |6 ÷ 3 − 2| ≥ 0 `(d(vec x))/dt = sqrt(3/(2r))`
1.02500 16.4 1.17875 18.860 [x2] = |6 ÷ 3 − 2| ≥ 0 `(d(vec x))/dt = sqrt(3/(2r))`
1.03125 16.5 1.18594 18.975 [x2] = |6 ÷ 3 − 2| ≥ 0 `(d(vec x))/dt = sqrt(3/(2r))`
1.03750 16.6 1.19313 19.090 [x2] = |6 ÷ 3 − 2| ≥ 0 `(d(vec x))/dt = sqrt(3/(2r))`
1.04375 16.7 1.20031 19.205 [x2] = |6 ÷ 3 − 2| ≥ 0 `(d(vec x))/dt = sqrt(3/(2r))`
1.05000 16.8 1.20750 19.320 [x2] = |6 ÷ 3 − 2| ≥ 0 `(d(vec x))/dt = sqrt(3/(2r))`
1.05625 16.9 1.21469 19.435 [x2] = |6 ÷ 3 − 2| ≥ 0 `(d(vec x))/dt = sqrt(3/(2r))`
1.06250 17.0 1.22188 19.550 [x2] = |6 ÷ 3 − 2| ≥ 0 `(d(vec x))/dt = sqrt(3/(2r))`
1.06875 17.1 1.22906 19.665 [x2] = |6 ÷ 3 − 2| ≥ 0 `(d(vec x))/dt = sqrt(3/(2r))`
1.07500 17.2 1.23625 19.780 [x2] = |6 ÷ 3 − 2| ≥ 0 `(d(vec x))/dt = sqrt(3/(2r))`
1.08125 17.3 1.24344 19.895 [x2] = |6 ÷ 3 − 2| ≥ 0 `(d(vec x))/dt = sqrt(3/(2r))`
1.08750 17.4 1.25063 20.010 [x2] = |6 ÷ 3 − 2| ≥ 0 `(d(vec x))/dt = sqrt(3/(2r))`
1.09375 17.5 1.25781 20.125 [x2] = |6 ÷ 3 − 2| ≥ 0 `(d(vec x))/dt = sqrt(3/(2r))`
1.10000 17.6 1.26500 20.240 [x2] = |6 ÷ 3 − 2| ≥ 0 `(d(vec x))/dt = sqrt(3/(2r))`
1.10625 17.7 1.27219 20.355 [x2] = |6 ÷ 3 − 2| ≥ 0 `(d(vec x))/dt = sqrt(3/(2r))`
1.11250 17.8 1.27938 20.470 [x2] = |6 ÷ 3 − 2| ≥ 0 `(d(vec x))/dt = sqrt(3/(2r))`
1.11875 17.9 1.28656 20.585 [x2] = |6 ÷ 3 − 2| ≥ 0 `(d(vec x))/dt = sqrt(3/(2r))`
1.12500 18.0 1.29375 20.700 [x2] = |6 ÷ 3 − 2| ≥ 0 `(d(vec x))/dt = sqrt(3/(2r))`

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] = |6 ÷ 3 − 2| ≥ 0 `(d(vec x))/dt = sqrt(3/(2r))`
0.75 12.0 0.86250 13.800 [x2] = |6 ÷ 3 − 2| ≥ 0 `(d(vec x))/dt = sqrt(3/(2r))`
0.80 12.8 0.92000 14.720 [x2] = |6 ÷ 3 − 2| ≥ 0 `(d(vec x))/dt = sqrt(3/(2r))`
0.85 13.6 0.97750 15.640 [x2] = |6 ÷ 3 − 2| ≥ 0 `(d(vec x))/dt = sqrt(3/(2r))`
0.90 14.4 1.03500 16.560 [x2] = |6 ÷ 3 − 2| ≥ 0 `(d(vec x))/dt = sqrt(3/(2r))`
0.95 15.2 1.09250 17.480 [x2] = |6 ÷ 3 − 2| ≥ 0 `(d(vec x))/dt = sqrt(3/(2r))`
1.00 16.0 1.15000 18.400 [x2] = |6 ÷ 3 − 2| ≥ 0 `(d(vec x))/dt = sqrt(3/(2r))`
1.05 16.8 1.20750 19.320 [x2] = |6 ÷ 3 − 2| ≥ 0 `(d(vec x))/dt = sqrt(3/(2r))`
1.10 17.6 1.26500 20.240 [x2] = |6 ÷ 3 − 2| ≥ 0 `(d(vec x))/dt = sqrt(3/(2r))`
1.15 18.4 1.32250 21.160 [x2] = |6 ÷ 3 − 2| ≥ 0 `(d(vec x))/dt = sqrt(3/(2r))`
1.20 19.2 1.38000 22.080 [x2] = |6 ÷ 3 − 2| ≥ 0 `(d(vec x))/dt = sqrt(3/(2r))`

Processed by KaTex Process with MathJax

Tips, tricks, lessons, and tutoring to help reduce test anxiety and move to the top of the class.