How to control cursor/caret size with CSS

Worth noting that some fonts the default size and position of the cursor just looks weird. If this is a high priority for you, it might be worth at least considering switching to a different font. Here is an example of one Google font that looks super weird and two that don't:

You might also have luck generating your webfont files with different settings. The font squirrel webfont generator in Expert Mode has settings for vertical metrics and x-height matching that may help with this issue. Most paid webfonts from different foundries also have similar export settings now. Definitely a time consuming task to tweak settings, export repeatedly, install the new files and check your work, but can often be worth it.

There isn't any way to change how the caret looks in a textarea. If you want to do that, you'll have to use something other than a textarea, such as a div or a canvas element and control everything with JavaScript.