1) Declare CSS for Visual Editor

Very easy, one-liner in your functions.php file.

// Add CSS to Visual Editor
add_editor_style('editorstyle.css');

The file path that you pass as a parameter is relative to your theme’s root. Make sure to actually create this file in your theme folder, at the specified location!

2) Make Sure You Have a Common Class To Work With

The HTML markup for the posts on your site are very likely wrapped within a container element. Perhaps something like:

<div class="post">
  <!-- all content for entire post in here -->
</div>

Then your typography CSS likely uses that class name to to create typography specific to posts:

.post h1, .post h2, .post h3, .post h4 { font-family: MuseoLight, Georgia, serif; font-weight: normal; margin: 0 0 10px 0; }
.post h2 { font-size: 28px; }
.post h2 { padding: 10px 180px 10px 15px; background: #237abf url(../images/title-bg.png) repeat-x; margin: 0; line-height: 1.3; font-size: 22px; }
.post h2, .post h2 a { color: white; text-shadow: 0 1px 2px #143855; }
.post h2 a:hover { color: #b8e0ff; }
.post h3 { font-size: 20px; padding: 5px 0; margin: 30px 0 15px 0; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; }
.post h4 { font-size: 18px; }
.post p { margin: 0 0 10px 0; }
.post pre { background: #eee; padding: 15px; overflow: auto; margin: 0 0 15px 0; border: 1px solid #ddd; }
.post pre code { font-size: 11px; }
.post code { background: #eee; font: 12px Monaco, Courier, Monospace; color: #0E304A; }
.post h3 code { font-size: 18px; }
.post acronym, abbr { border-bottom: 1px dotted #514031; cursor: help; }
.post ins { text-decoration: underline; }
.post del { text-decoration: line-through; }
.post a { outline: none; text-decoration: none; color: #19517C; background: #eee; border: 1px solid #ddd; padding: 1px 3px 2px 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
.post a:hover { color: #fff; background: #143855; border: 1px solid #143855; }

It would be nice if we could just copy and paste that over to the CSS file we declared in Step 1. The problem is, the Visual Editor doesn’t have that same class name inside of it. So if we did a straight up copy-and-paste, none of these styles would apply. Rather than re-jigger all our CSS to not use that class name, we can actually just force the visual editor to also have that class name.

Just put this in functions.php:

// Add body class to Visual Editor to match class used live
function mytheme_mce_settings( $initArray ){
 $initArray['body_class'] = 'post';
 return $initArray;
}
add_filter( 'tiny_mce_before_init', 'mytheme_mce_settings' );

This isn’t quite as efficient as referencing a single file, but at least you can copy and paste easily. If you are the type of person who separates CSS out into different files (like Typography has it’s own typography.css), then you are more than welcome to reference the same CSS both for Visual Editor and in the live theme.