Thank you for writing in, I understand your confusion, but please take it like this;
The Theme Options > Typography, will be the general configuration of your site's Typography. As you can see there is a body font and headline font configuration in there, those will be the defaults settings of your site's typography.
You can also see the Root Font Size options in there, this is for your text responsiveness. I have a brief explanation of how that works here, please read and understand it. Kory has another explanation for Base Font Sizes here as well.
The Font Manager is like your box of font-families, you don't want to bring all your tools every time, right? You just want to bring those tools that you needed. Same thing in the Font Manager you just want to select the font-families that you needed for your site.
Font Templates forget about that, that is now called Font Manager
ELEMENT FONT SETTINGS, if the Theme Options > Typography is general settings, then element font setting is for a specific element. For example, there is a text that you want to be highlighted and have a bigger font and different font-family, then you do that to its settings.
If the specific styling cannot be achieved within the element settings, then that's the time you used Custom CSS
Hope this shed some lights,