Add a span/class to a field
Enable the module display suite extras
Define a display suite layout. Once the layout is specified you get the 'custom classes tab'. 
Enable Field Templates in the display suite configuration screen admin > structure > Display Suite. Then select "Field Templates". Check "Enable Field Templates. URL is admin/structure/ds/list/extras
Define some classes. Using the "CSS classes" tab in the display suite settings define some "CSS classes for fields". URL is admin/structure/ds/classes
Ensure that the view mode that you are using is managed by display suite. Under "Manage display" accessed either via the node editing screen or admin > structure > content types check the box next to the view mode being used. In the format column the 'Field template' text should now be shown.
Using the cog icon on the right, edit the field template setting. Select the CSS style chosen in #4


With images the process is
1. enable display suite extras
2. Define a display suite layout




Enable field templates

Define classes

Manage the view mode





Select the classes