Home > font size > What does the size of the font translate to exactly?

# What does the size of the font translate to exactly?

October 8Hits:1

I have a 40 pixel font that I'm trying to translate into custom images. I'm trying to match the size of the image exactly, but I'm having some problems getting exactly the right size. Basically, what it comes down to is this. When a font says it is X pixels, what does this physically mean?

This is an excellent question, which has a rather unsatisfactory answer.

The size of type, whether specified in pixels, points (1/72") or millimetres, is the height of an em-square, an invisible box which is typically a bit larger than the distance from the tallest ascender to the lowest descender.

Given this is a somewhat arbitrary measure which

• is dependent on the exact technical design of the font
• can't be precisely measured from a printed or rasterized sample

it's not very meaningful or useful, other than as an approximation.

In your case, work out what size you need to specify in Photoshop to match the browser's rendering by experimentation. You should find this to be a constant ratio for any font, but I wouldn't expect this to be the case if you change browser or OS.

ASCII Time! Pretend the two boxes below are pieces of lead type from 1900 or so. Back then, typefaces were cast in lead (or routed in wood). For the type to be set into a printing lock-up, they had to be connected to solid blocks. This is where the dimension of the type (in points) comes from:

+--------------+  +-------------+  <----+
|              |  |             |       |
|      XX      |  |             |       |
|     X  X     |  |             |       |
|    XX  XX    |  |             |       |
|    XX  XX    |  |     X       |
|    XXXXXX    |  |    X X      |   Point size of the type
|   XX    XX   |  |    XXX      |
|   XX    XX   |  |   X   X     |       |
|  XX      XX  |  |   X   X     |       |
|  XX      XX  |  |             |       |
|              |  |             |       |
+--------------+  +-------------+  <----+



Note the two letters above are different sizes, but their bounding box is the same. As such, in terms of points, both of those fonts are the same size.

Nowadays, we don't make much type in lead and wood and most of it is digital. However, the concept of the point sizing still exists in that there is a virtual box that is the same height for every letter that the type is placed on. Again, it's this virtual box that defines the point size rather than the physical measurements of the letterforms themselves. The actual size of the letterforms are often smaller than the point size (but can also be larger as well).

Measuring type in pixels doesn't work because of that, however, you can 'set' type in pixels in CSS and the like. The browser does a translation as best it can between the px size declared. But it's always a fuzzy estimation.

Ultimately, there's no accurate way to get two typefaces letterforms exactly the same size short of looking at them visually and changing the size of each until you see them as being the same size.

The "font size" of a font refers to the font's "em height", which isn't necessarily the same as the height of particular characters in the font.

Usually the em height of a font adheres to the same basic idea - it'll be roughly set to the distance from the lowest descender or accent (such as the bottom of the letter g) to the highest ascender (such as the top of the letter h):

As you can see, none of the individual letters cover that whole span.

With digital fonts, the "em height" of a font is a choice made by the font designer, and does not have to conform to this convention at all: a digital type designer can pick any foundation for their em size. However, fonts still tend to adhere, at least roughly, to the sort of convention described above. In old days when type consisted of metal blocks, the "em height" was the height of one of those blocks, which needed to be high enough not only for any character in that typeface but also for any ascenders, descenders, and accents.

Now, many modern typefaces include accents on capital letters too (such as Ć) - these accents extend outside what is traditionally thought of as the typographical ascender and thus these (and possibly other special characters) fall outside the top of the "em". For historical reasons we don't adjust the em size to allow these, we keep the em size and just have these extend out of it - any typographer using such accents will need to ensure there is space for them to extend into.

Now, even if a designer does follow a predictable convention for their em size, this still doesn't tell you the size of capital letters (cap-height) or the size of say an o (x-height or midline) as these can vary freely between typefaces in relation to the ascender height.

Within a font family, these will usually be consistent though. So for example, Times New Roman Bold and Times New Roman Regular will have the same character sizes for the same em size, which should include ascenders, descenders, cap-height and x-height.

Try typing in the vertical bar character ('|') and measure that. If I duplicated your situation correctly and your antialiasing isn't blurring it too much, it should be 22px.

22px represents the height of the block of type. But each character fills the block differently. A 'g' or 'q' will occupy the lower region of that 22px, while capital letters and lowercase letters like 'b' or 'd' will occupy the upper portions. '|' is one of the only (if not the only) character that will entirely fill the 22px space.

I don't know about how to compare to your CSS settings, but that explains how Photoshop interprets text height.

Are you sure your font is measured in pixels? Most of the time fonts are measured in points. A point is 1/72 of an inch. So a 40 pt font is 40/72" or 5/9" tall. The kicker is that that is the dimension from the top of the ascenders on tall letters to the bottom of the descenders on letters that hang below the baseline. That's why the x-height is sometimes used, as mentioned above. That is the height of the lower-case letters that don't stick up or down.

Either way, the measurements are never exact anyway, unfortunately. You'll just have to some measuring and figuring (and/or trial-and-error) to accomplish what you're trying.

I doubt I'm going to exactly answer the question, but I think I know how to do what you are trying to do. The thing is, it has nothing to do with Photoshop, unless Photoshop can crop images the way PowerPoint can.

Why not make one image of the word or words you are working with and then duplicate and crop each duplication. Like this:

Tags:font size

## Related Articles

• ### What does the size of the font translate to exactly?October 8

I have a 40 pixel font that I'm trying to translate into custom images. I'm trying to match the size of the image exactly, but I'm having some problems getting exactly the right size. Basically, what it comes down to is this. When a font says it is X

• ### The size of a font - largerJune 28

this is my document: \documentclass[a4paper,10pt]{article} \usepackage{czech} \begin{document} \begin{quote} \itshape\uv{V poledne vám přijde textová zpráva z neznámého čísla, že máte večer dorazit ke staré městské továrně. Ne, to není žádná vyděračs

• ### Selecting optical sizes for all fonts in a familyJuly 30

XeTeX and LuaTeX are able to assign optical sizes to fonts when they are provided. In those situations where XeTeX or LuaTex are unable to correctly assign optical sizes I am able to specify them but only for the regular font, not for italics, bold,

• ### Keep window size when resizing font in MacVimAugust 16

When changing the font size in MacVim on OSX (Cmd +,Cmd -), the window is resized as well. Is there a setting that makes MacVim keep its window's size, when the font is resized? --------------Solutions------------- The window size in MacVim is based

• ### In Textures, is there a way to permanently increase the size of the font used for displaying the TeX file?September 11

In Textures, is there a way to permanently increase the size of the font used for displaying the TeX file? Or is there another way of increasing the font size? --------------Solutions------------- In the Terminal, say defaults write com.bluesky.Textu

• ### How do I change the size of the font for the output of the Print[] command?November 23

I created a Stylesheet that increased the sizes of the fonts for the styles Input, Output and Text. Still, when I use the command Print[] the output comes out tiny. In the code below I added some comments to the program trying to convey what is happe

• ### LaTeX font-size vs. word font-size November 7

Warning If you're looking for advice how to make your document look like it's been written in Word, this is most likely not the question you're looking for. This question is mostly of theoretical nature, as it results in tiny differences, which will

• ### Composing messages in Apple Mail: Displaying text on screen in larger size without changing font sizeSeptember 3

When composing messages in Mail.app, as I now have an HD screen on my MBP, the default Helvetica 12pt appears quite small. I would like to be able to enlarge the text size, but only locally, without changing the font in the message, as I don't want t

• ### Beamerposter scale parameter, text font size and title font sizeApril 27

I want to create a poster with beamerposter with pagesize 240cm (width) x 120cm (height) with two columns. Will the following line of code produce what I need? \usepackage[size=custom,width=240,height=120,scale=1,debug]{beamerposter} If so, what does

• ### ArcMap label font size vs callout font sizeJune 20

Within ArcMap 10.1: When converting labels to annotations I have specified a font size of 14. I have also created a number of callout text annotations within the map and specified exactly the same font, size and properties as the converted label anno

• ### unify figure(gnuplot generated) font size and latex font sizeDecember 22

I am generating some figures with gnuplot epslatex terminal in standalone mode. There is no problem in generating the figures and the quality. However, while using the elsevier article class in two column mode, I have to scale the figures to fit into

• ### Scale font sizes – match text font (Comfortaa) and math fontNovember 11

Before I start, I want to note that I don't know very much about (La)TeX's font system and find it to be very confusing and not very well-documented. I've read the "fntguide", but that only gives very short examples for all the available command

• ### How to change authors font size without changing font faceJanuary 5

I am using ACM PROC format and want to change the font size of emails in the author list. When I use \small, the font-face also changes. Is it possible to only change the font size? Here is my code: \documentclass{acm_proc_article-sp} \title{Title} \

• ### Color-filled box in text area with size corresponding to font sizeJanuary 22

Is it possible to construct a small, color-filled box in text among ordinary text? The size of the box should correspond to the font size. I need it because I need to construct a legend for some graphics that I have constructed elsewhere. -----------

• ### How to determine "native" sizes for bitmapped fonts?February 13

I have installed Emacs24 (emacs24-lucid from wheezy-backports) on an otherwise stable Debian system, and I run it under X11 Under X11, Emacs24 displays some font families, such as ProFontIIx, as non-antialiased fonts only when I choose the size of on

• ### make4ht: title date font size is gigantic compared to title font size, and body font sizeJanuary 13

For this problem, I am using the following MnWE: \documentclass[fontsize=18pt, paper=letter]{scrartcl} \usepackage{lmodern} \usepackage[T1]{fontenc} \usepackage{amsmath} \begin{document} \title{A test \LaTeX to HTML page} \maketitle \section{Section

• ### shrink the size of the font size in the listingJanuary 22

I am using the latex beamer and trying to reduce the font size of the listing to display the whole JSON code without reducing the font size of the sentence before. How can I get it to work? Code: \documentclass[xcolor=dvipsnames]{beamer} \usepackage[

• ### Point Size with X11 FontsAugust 12

I'm trying to set up my fonts on a bare bones X windows system, but my settings aren't giving me the results I expect. I'm using Terminator as my terminal. I've set my Terminator font to "Monospace 9". My ~/.Xresources specifies a system DPI of

• ### Reduce size and justify font of caption using memoirMarch 15

I try to reduce and better align my caption text (and not the automatic label "figure.") text with memoir. I try this this without success, and i search in the memoir documentation, and try some commands, without success too. My example code : \

• ### How to work out font-size setting by counting pixels?November 14

I have an image of a proposed website. How do I work out what px font-size value to set text to by counting pixels? E.g. I have font-size: 14px, (in Arial) but counting from the top of an "L" and down the tail of a "p" I count 10 pixel