Saving a Logo as an Email Signature via Save for Web (Legacy) in Illustrator

Hi everyone!

I am dealing with an issue that is starting to drive me crazy. I am working on creating an email signature (400px x 200px) for a client and it includes a logo that is made up of text. No matter how I create the image itself, it always comes out blurry when I save it for the web even if I use the Save for Web (Legacy) tool. The image needs to be saved as a PNG file for the client, so that is what I've been using.

I use the preview button on that tool constantly to see what it would look like on the web, and it still shows up blurry:

This is what the email signature looks like at 1200px x 600px at 300dpi as a plain vector image in Illustrator: 

Nice and clear and crisp.

Now, here is my issue. When I take the size of the artboard down to the desired size of 400px x 200px, it becomes intensely blurry:

I have tried truly everything:

-Created a 400px x 200px artboard in Illustrator in RGB format at 72ppi-->comes out with the same, very blurry results.

-Created a 400px x 200px artboard in Photoshop in RGB format at 72ppi-->comes out with the same, very blurry results.

-I've created a larger canvas size, saved it at a higher resolution and then gone back in and decreased the size of the image--> it still comes out blurry.

I am starting to lose my mind. I have tried to create it in Illustrator and then move it to Photoshop, vice versa, -re-created the artwork completely in Photoshop (text and all) to see if that helps, and without fail, it always comes out blurry.

If there is anyone who thinks they have an idea of something else I could try, I am all for it! Or if I am just doing something completely wrong, please let me know. I also wouldn't be opposed to someone taking the time to walk me through the correct process if I am in the wrong-I would really appreciate any help you all can give. Thanks so much!