Editing typography is super easy by adding some CSS. VEM has been designed to provide a tremendous amount of control over nearly every typography item; moreover, it can be assigned to entire post types (like all listings) or only specific lists.

Reminder: when applying your own custom styles, don’t forget that VEM uses media query specific styles for a number of elements.

Here are some of the more common customizations.

Calendars

Month/Title

.vem-calendar .vem-header-month {
font-size: 24px;
text-transform: uppercase;
}

Week Days

.vem-calendar .vem-daylabels {
font-size: inherit; /*adopts your theme default body font size*/
}

Event Times

.vem-calendar .vem-single-event { 
font-size:75%; 
}

Event Titles

.vem-calendar .vem-single-event-title {
font-size: 75%;
font-weight: bold
}

Event Pre-Titles

.vem-single-event-posttitle {
font-size: 75%;
}

Event Post-Titles

.vem-single-event-posttitle {
font-size: 75%;
}

Calendar Popup Details

Start Time

.vem-calendar-dialog .vem-single-event-start {
font-size: 16px;
}

Event Title

.vem-single-event-dialog .vem-single-event-title { 
font-weight:bold; 
font-size:18px; 
}

Event Post-Titles and Pre-Titles

Uses same value as full page calendar styles above.

Event Details and But Ticket Links

.vem-calendar-dialog .ui-widget-content a {
font-size: 15px;
}

Listings

Titles (default values below, adjust as desired)

@media only screen and (max-width: 767px) {
.vem-listing .vem-single-event-title {
font-weight: bold;
font-size: 24px;
line-height: 1.2em;
}
}
@media only screen and (min-width: 768px) {
.vem-listing .vem-single-event-title {
font-weight: bold;
font-size: 42px;
line-height: 1.2em;
}
}

Listings When Used Inside Widgets (default values below, adjust as desired)

.widget .vem-single-event-title {
font-size: 24px;
}