Phi (φ) in HTML
Phi is the twenty first Greek letter, written Φ and φ. The capital is at U+03A6 and the small letter at U+03C6, with a separate phi symbol at U+03D5.
At a glance
- Character
- Φ φ
- Named entity
- Φ φ
- Decimal reference
- Φ φ
- Hex reference
- Φ φ
- Unicode code point
- U+03A6, U+03C6
- Unicode name
- GREEK CAPITAL LETTER PHI, GREEK SMALL LETTER PHI
- In the entity reference
- Greek
In detail
Phi has two small letter glyphs and the split is genuinely confusing. The Greek small letter phi at U+03C6 is conventionally drawn as a loop with a stroke through it, while the phi symbol at U+03D5 is drawn as a circle with a vertical bar. Different fonts favour different shapes for the same code point, so the glyph you see is not a reliable guide to which character is in the file.
The letter conventionally names the golden ratio, the number whose value is one plus the square root of five, all divided by two. Its defining property is that it equals one plus its own reciprocal, which is what makes it appear in continued fractions and in the ratio of consecutive Fibonacci numbers as they grow.
The claims made for the ratio in design deserve scepticism. The mathematics is exact and the aesthetic claims are mostly retrofitted, with many of the famous examples in art and architecture failing to hold up when measured. Using it as one proportion among several in a type scale is reasonable; presenting it as a law of visual harmony is not.
In physics the capital phi is magnetic or electric flux and the small phi a phase angle, and in number theory the phi function counts the integers up to n that share no factor with n. As with most of these letters, the meaning comes from the field rather than from the character.
Examples
:root {
--phi: 1.618;
--text-base: 1rem;
--text-lg: calc(var(--text-base) * var(--phi));
--text-xl: calc(var(--text-lg) * var(--phi));
}<p>Greek small letter phi: φ (U+03C6)</p>
<p>phi symbol: ϕ (U+03D5)</p>Things that catch people out
- The two glyph shapes do not map cleanly onto the two code points, because fonts disagree. Never identify the character by looking at it.
- The golden ratio is irrational, so 1.618 is an approximation. It is fine for a type scale and not fine for anything that has to close exactly.
- Design claims about the ratio are largely folklore. Use it because the proportion works, not because it is supposed to be universal.
Try it: HTML Entity Reference
Search 152 entities across 9 categories, switch the copy format between the character, the name, the decimal form and the hex form, and copy in one click.
HTML Entity Reference
LOCAL · Browser-OnlySearchable reference of 150+ HTML entities with one-click copy in any format
152 entities across 9 categories
Commonly Used
→Arrows(13)
±Math(35)
$Currency(8)
…Punctuation(21)
©Symbols(24)
πGreek(30)
½Fractions(6)
●Geometric(7)
æLatin Special(8)
Click any entity card to copy it in your chosen format. All data is embedded in the page and works offline.
Related HTML entities
All html entities →Pi (π) in HTML
The Greek letter pi at U+03A0 and U+03C0, its entity forms, the capital pi that is not the product operator, and how to write pi in code correctly.
Omega (ω) in HTML
The Greek letter omega at U+03A9 and U+03C9, its entity forms, the separate ohm sign that normalises onto it, and its use for angular frequency.
Gamma (γ) in HTML
The Greek letter gamma at U+0393 and U+03B3, its entity forms, what gamma correction actually encodes, and the gamma function that shares the letter.
Non-breaking space ( ) in HTML
The no-break space at U+00A0, what it prevents beyond line breaking, why it defeats site search, and the CSS properties that do the job better.
Zero width space (U+200B) in HTML
The zero width space at U+200B, why it is not in the entity reference tool, how it lets long strings wrap, and the trouble an invisible character causes.
Soft hyphen (­) in HTML
The soft hyphen at U+00AD, what it does that a normal hyphen cannot, why it wrecks copy and search, and when CSS hyphenation is the better answer.
Tools for this
- HTML Entity Reference Free online HTML entity reference - search and copy HTML entities with live preview
- HTML Entity Encoder Free online HTML entity encoder - encode or decode HTML entities to prevent XSS and display issues